title: Twitter bootstrap - multiple modal windows
body: <p>I'm using the modal window component in a loop. Every loop content has X number of thumbnails with different IDs (the modals also have different IDs) that should trigger the modals by their data-toggle attribute, however the modals only work on the first item of the loop, the data-toggle only set the background of the screen with the rest.
  The modal windows contents and markup are in the DOM, only they don't show up.</p>
  
  <p>I have tried removing the fade class, renaming the IDs, but I have no luck so far.
  I've found a <a href="http://www.chapter31.com/2011/10/27/twitter-bootstrap-modal-not-working-in-firefox/" rel="nofollow">similar problem,</a> but that doesn't help my case.</p>
  
  <p>What could be the problem?</p>
  
  <pre><code>&lt;li class="span3"&gt;
  &lt;div class="modal hide" id="modal1"&gt;
     &lt;div class="modal-header"&gt;
          &lt;button class="close" data-dismiss="modal"&gt;x&lt;/button&gt;
          &lt;h3&gt;Lipsum&lt;/h3&gt;
     &lt;/div&gt;
     &lt;div class="modal-body"&gt;
         &lt;p&gt;Lipsum&lt;/p&gt;
     &lt;hr&gt;
     &lt;img src="&lt;?php the_field('srceenshot')?&gt;"&gt;
     &lt;/div&gt;
     &lt;div class="modal-footer"&gt;
         &lt;button class="close" data-dismiss="modal"&gt;x&lt;/button&gt;
     &lt;/div&gt;
  &lt;/div&gt;
      &lt;a class="thumbnail" data-toggle="modal" rel="popover" data-content="&lt;?php the_field('screenshot_text')?&gt;" data-original-title="&lt;?php the_field('screenshot_header')?&gt;" href="#modal1"&gt;
          &lt;img src="&lt;?php the_field('screenshot')?&gt;"&gt;
      &lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>SOLUTION:</p>
  
  <pre><code>&lt;div class="modal hide" id="modal1_&lt;?php echo $count"&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>&lt;a class="thumbnail" data-toggle="modal" rel="popover" data-content="&lt;?php the_field('screenshot_text')?&gt;" data-original-title="&lt;?php the_field('screenshot_header')?&gt;" href="#modal1_&lt;?php echo $count"&gt;
  </code></pre>