title: Dynamic modal box using jquery
body: <p>I am working with a project "college management system" using codeigniter.  I built a table for displaying all of the students. I want to pop up a modal box containing corresponding student details when any of the "i" symbols on a row are pressed. But I get the details of first students for every click.</p>
  
  <p>Any suggestions?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;th&gt;Reg&lt;/th&gt;
          &lt;th&gt;Action&lt;/th&gt;
      &lt;/tr&gt;
      &lt;?php foreach($studData as $record) { ?&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;?php echo $record-&gt;reg_no ?&gt;&lt;/td&gt;
          &lt;td&gt;&lt;a href="#" class="infoStudent"&gt;&lt;i class="fa fa-info"&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;
          &lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;div class="modal fade" id="myModal"&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-label="Close"&gt;&lt;span
                              aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
                      &lt;h3 class="modal-title"&gt;&lt;?php echo $record-&gt;reg_no ?&lt;/h3&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;?php } ?&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>JS Code:</strong></p>
  
  <pre><code>$(document).ready(function(){
      $('infoStudent').on('click',function(){
          $("#myModal").modal("show");
      });
  }); 
  </code></pre>