title: How can I show data using a modal popup when clicking a table row using bootstrap?
body: <p>I created a table of students and I'd like to show the details (id, name, age) of modal when clicking a table row on popup.</p>
  
  <p><strong>ListStudents.xhtml</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="table table-bordered table-striped"&gt;
   &lt;thead&gt;
    &lt;tr&gt;
     &lt;th&gt;&lt;center&gt;Name&lt;/center&gt;&lt;/th&gt;
     &lt;th&gt;&lt;center&gt;Age&lt;/center&gt;&lt;/th&gt;
    &lt;/tr&gt;
   &lt;/thead&gt;
   &lt;tbody&gt;
    &lt;ui:repeat var="stud" value="#{dataModelBeanD.model}"&gt;
     &lt;tr&gt;
      &lt;td&gt;#{stud.name}&lt;/td&gt;
      &lt;td&gt;&lt;center&gt;#{stud.age}&lt;/center&gt;&lt;/td&gt;
      &lt;td&gt;
       &lt;p data-placement="top" data-toggle="tooltip" title="Consult"&gt;
        &lt;button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" &gt;
         &lt;span class="glyphicon glyphicon-modal-window"&gt;&lt;/span&gt;
        &lt;/button&gt;
       &lt;/p&gt;
       &lt;div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true"&gt;
             &lt;div class="modal-dialog"&gt;
            &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                 &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;
                  &lt;span class="glyphicon glyphicon-remove" aria-hidden="true"&gt;&lt;/span&gt;
                 &lt;/button&gt;
                 &lt;h4 class="modal-title custom_align" id="Heading"&gt;Your Detail&lt;/h4&gt;
               &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
                 &lt;h:outputLabel value="Name : " styleClass="control-label col-sm-2"/&gt;
           &lt;h:outputLabel value="#{stud.name}" styleClass="form-control"/&gt;
           &lt;h:outputLabel value="Age : " styleClass="control-label col-sm-2"/&gt;
           &lt;h:outputLabel value="#{stud.age}" styleClass="form-control"/&gt;
               &lt;/div&gt;
               &lt;/div&gt;
          &lt;/div&gt;
           &lt;/div&gt;
         &lt;/td&gt;
     &lt;/tr&gt;
    &lt;/ui:repeat&gt;
   &lt;/tbody&gt;
  &lt;/table&gt;
      </code></pre>
  </div>
  </div>
  </p>
  
  <p>On JS, I made:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>$(document).ready(function(){
   $("#mytable #checkall").click(function () {
           if ($("#mytable #checkall").is(':checked')) {
               $("#mytable input[type=checkbox]").each(function () {
                   $(this).prop("checked", true);
               });
  
           } else {
               $("#mytable input[type=checkbox]").each(function () {
                   $(this).prop("checked", false);
               });
           }
       });
       
       $("[data-toggle=tooltip]").tooltip();
   });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Knowing that I found many tutorials to solve this issue if we're talking about static table.
  However, as you saw I'm working with a dynamic table and the problem is I obtained the same details of the first row after clicking on the 2 rows like described by <a href="http://i.stack.imgur.com/4ACBa.png" rel="nofollow">this screenshot</a></p>
  
  <p>Have you please any idea about solving this issue.
  Thanks a lot.</p>