title: How can I display tabs within an iterated Modal?
body: <p>I have some tabs within a modal that is iterated through clicks of different buttons. When the first button is clicked, all tabs can be opened. But they do not work from second button. Although the first tab which displays details from the row where the button is located works perfectly fine and displays the correct information that is linked with that button. How do I get the tabs to work after $k increases? Here is what I have:</p>
  
  <pre><code>&lt;?php for($k=0; $k&lt;$bookingCount; ++$k){ ?&gt;
  
  &lt;div id="bookingDetails&lt;?php echo $k; ?&gt;" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
  
  &lt;div class="modal-header"&gt;...&lt;/div&gt;
  
  &lt;div class="modal-body"&gt;
  &lt;div class="row-fluid sortable"&gt;    
  &lt;div class="box span12"&gt;
  &lt;div class="box-content"&gt;
  
  &lt;ul class="nav nav-tabs" id="myTab"&gt;
          &lt;li&gt;&lt;a href="#details" data-toggle="tab" class="active"&gt;Details&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#sms" data-toggle="tab"&gt;SMS&lt;/li&gt;
          &lt;li&gt;&lt;a href="#email" data-toggle="tab"&gt;Email&lt;/li&gt;
          &lt;li&gt;&lt;a href="#phone" data-toggle="tab"&gt;Phone&lt;/li&gt;
          &lt;li&gt;&lt;a href="#post" data-toggle="tab"&gt;Post&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class="tab-content"&gt;
      &lt;div class="tab-pane active" id="details"&gt;...&lt;/div&gt;
      &lt;div class="tab-pane" id="sms"&gt;...&lt;/div&gt;
      &lt;div class="tab-pane" id="email"&gt;...&lt;/div&gt;
      &lt;div class="tab-pane" id="phone"&gt;...&lt;/div&gt;
      &lt;div class="tab-pane" id="post"&gt;...&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="modal-footer"&gt;...&lt;/div&gt;
  
  &lt;?php } ?&gt;
  </code></pre>