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

  10.                     </ul>
  11.                 </nav>


  12. <section class="main">
  13. <div class="portfolio">
  14. <article class="entry video">
  15.                 <div id="Descriptiondiv"> 
  16.                  <IMG class="displayed" src="design/logo.gif" alt="Logo">
  17.                  <div style="float:left; padding-top:10px;" class="conteudo_corrente">  CONTENT

  18.         </div>
  19.                  <br /><img class="displayed" src="images/portfolio/work_01.jpg" width="70%"/>
  20. <br /><img class="displayed" src="images/portfolio/work_02.jpg" width="70%"/>
  21. <br /><img class="displayed" src="images/portfolio/work_03.jpg" width="70%"/>
  22.                 
  23.                                 <a href="#Descriptiondiv" data-rel="prettyPhoto" title="">
  24.                      <img src="images/portfolio/work1.jpg" alt="">
  25. <span class="video-hover">video</span>
  26.                     </a>
  27.                     
  28. </article>
  29.         </div>
CSS

  1. #Descriptiondiv {
  2.    width:50% !important;
  3.    /*height:50%;*/
  4.    height:1800px;
  5.    display:none;
  6.    
  7.    }

the problem is when i enter a new content with different images like thise.

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

  10.                     </ul>
  11.                 </nav>


  12. <section class="main">
  13. <div class="portfolio">
  14. <article class="entry video">
  15.                 <div id="Descriptiondiv"> 
  16.                  <IMG class="displayed" src="design/logo.gif" alt="Logo">
  17.                  <div style="float:left; padding-top:10px;" class="conteudo_corrente">  CONTENT

  18.         </div>
  19.                  <br /><img class="displayed" src="images/portfolio/work_01.jpg" width="70%"/>
  20. <br /><img class="displayed" src="images/portfolio/work_02.jpg" width="70%"/>
  21. <br /><img class="displayed" src="images/portfolio/work_03.jpg" width="70%"/>
  22.                 
  23.                                 <a href="#Descriptiondiv" data-rel="prettyPhoto" title="">
  24.                      <img src="images/portfolio/work1.jpg" alt="">
  25. <span class="video-hover">video</span>
  26.                     </a>
  27.                     
  28. </article>


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

  33.         </div>
  34.                  <br /><img class="displayed" src="images/portfolio/work_04.jpg" width="70%"/>
  35. <br /><img class="displayed" src="images/portfolio/work_05.jpg" width="70%"/>
  36. <br /><img class="displayed" src="images/portfolio/work_06.jpg" width="70%"/>
  37.                 
  38.                                 <a href="#Descriptiondiv" data-rel="prettyPhoto" title="">
  39.                      <img src="images/portfolio/work1.jpg" alt="">
  40. <span class="video-hover">video</span>
  41.                     </a>
  42.                     
  43. </article>
  44.         </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
  1. #Descriptiondiv {
  2.    width:50% !important;
  3.    /*height:50%;*/
  4.    height:1800px;
  5.    display:none;
  6.    
  7.    }
  8.    
  9.    #Descriptiondiv2 {
  10.    width:50% !important;
  11.    /*height:50%;*/
  12.    height:1800px;
  13.    display:none;
  14.    
  15.    }
But that's not the best solution.

Can anyone suggest another way?

Thank you and Merry Christmas :)