Insert multiple/different div content

Insert multiple/different div content

Hi there,
I´m trying to use this  FILTERABLE PORTFOLIO: http://webdesigntunes.com/tutorial/filterable/
However I want to use content with multiple images and text. 

I I found this code that works perfectly

INDEX
  2. <div id="pholio">
  3.         <!-- START PHOLIO -->
  4.   <nav class="primary clearfix">
  5.                     <ul class="conteudo_corrente">
  6.                         <li><a href="#" class="selected" data-filter="*">All</a></li>
  7.                         <li><a href="#" data-filter=".web">PRODUCT</a></li>
  8.                         <li><a href="#" data-filter=".ill">PRINT</a></li>
  9.                         <li><a href="#" data-filter=".logo">WEB</a></li>
  10.                         <li><a href="#" data-filter=".video">VIDEO</a></li>

  12.                     </ul>
  13.                 </nav>


  16. <section class="main">
  18. <div class="portfolio">
  20. <article class="entry video">
  21.                 <div id="Descriptiondiv"> 
  22.                  <IMG class="displayed" src="design/logo.gif" alt="Logo">
  23.                  <div style="float:left; padding-top:10px;" class="conteudo_corrente">  CONTENT

  25.         </div>
  26.                  <br /><img class="displayed" src="images/portfolio/work_01.jpg" width="70%"/>
  27. <br /><img class="displayed" src="images/portfolio/work_02.jpg" width="70%"/>
  28. <br /><img class="displayed" src="images/portfolio/work_03.jpg" width="70%"/>
  29.                 
  30.                                 <a href="#Descriptiondiv" data-rel="prettyPhoto" title="">
  31.                      <img src="images/portfolio/work1.jpg" alt="">
  32. <span class="video-hover">video</span>
  33.                     </a>
  34.                     
  35. </article>
  36.         </div>
CSS

  2. #Descriptiondiv {
  3.    width:50% !important;
  4.    /*height:50%;*/
  5.    height:1800px;
  6.    display:none;
  7.    
  8.    }
the problem is when i enter a new content with different images like thise.

  2. <div id="pholio">
  3.         <!-- START PHOLIO -->
  4.   <nav class="primary clearfix">
  5.                     <ul class="conteudo_corrente">
  6.                         <li><a href="#" class="selected" data-filter="*">All</a></li>
  7.                         <li><a href="#" data-filter=".web">PRODUCT</a></li>
  8.                         <li><a href="#" data-filter=".ill">PRINT</a></li>
  9.                         <li><a href="#" data-filter=".logo">WEB</a></li>
  10.                         <li><a href="#" data-filter=".video">VIDEO</a></li>

  12.                     </ul>
  13.                 </nav>


  16. <section class="main">
  18. <div class="portfolio">
  20. <article class="entry video">
  21.                 <div id="Descriptiondiv"> 
  22.                  <IMG class="displayed" src="design/logo.gif" alt="Logo">
  23.                  <div style="float:left; padding-top:10px;" class="conteudo_corrente">  CONTENT

  25.         </div>
  26.                  <br /><img class="displayed" src="images/portfolio/work_01.jpg" width="70%"/>
  27. <br /><img class="displayed" src="images/portfolio/work_02.jpg" width="70%"/>
  28. <br /><img class="displayed" src="images/portfolio/work_03.jpg" width="70%"/>
  29.                 
  30.                                 <a href="#Descriptiondiv" data-rel="prettyPhoto" title="">
  31.                      <img src="images/portfolio/work1.jpg" alt="">
  32. <span class="video-hover">video</span>
  33.                     </a>
  34.                     
  35. </article>


  39. <article class="entry web">
  40.                 <div id="Descriptiondiv"> 
  41.                  <IMG class="displayed" src="design/logo.gif" alt="Logo">
  42.                  <div style="float:left; padding-top:10px;" class="conteudo_corrente">  CONTENT 22

  44.         </div>
  45.                  <br /><img class="displayed" src="images/portfolio/work_04.jpg" width="70%"/>
  46. <br /><img class="displayed" src="images/portfolio/work_05.jpg" width="70%"/>
  47. <br /><img class="displayed" src="images/portfolio/work_06.jpg" width="70%"/>
  48.                 
  49.                                 <a href="#Descriptiondiv" data-rel="prettyPhoto" title="">
  50.                      <img src="images/portfolio/work1.jpg" alt="">
  51. <span class="video-hover">video</span>
  52.                     </a>
  53.                     
  54. </article>
  55.         </div>
It repeated the same content on the first (entry video) to the second (entry web).

I think the problem is because I'm using the same id = "#Descriptiondiv"
Eu consigo resolver o problema ao colocar vários id. E xample:

CSS
  2. #Descriptiondiv {
  3.    width:50% !important;
  4.    /*height:50%;*/
  5.    height:1800px;
  6.    display:none;
  7.    
  8.    }
  9.    
  10.    #Descriptiondiv2 {
  11.    width:50% !important;
  12.    /*height:50%;*/
  13.    height:1800px;
  14.    display:none;
  15.    
  16.    }
But that's not the best solution.

Can anyone suggest another way?

Thank you and Merry Christmas :)