title: How to add dynamic list to each row of a HTML table in Jquery?
body: <p>I have a dynamic table in a form, where depending on the user Input rows will be added to the table. Table column have Id, Name, Types of games(Dynamic list fetched from DB Table). </p>
  
  <p>Now when user enters any number in <strong>No. of Students field</strong> and click on <strong>Load Games button</strong>,   I am expecting that table should expand to that many rows so that user can insert the data in fields.</p>
  
  <p>Its working as well but the problem is third field of the table is containing a list. and I am unable to understand how to populate the list for game_id field in every row of the table.</p>
  
  <p><strong>Code</strong></p>
  
  <pre><code>                &lt;?php
                  $db =  new PDO("sqlite:c:/sqlite/games.db");  
                  $db-&gt;setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
                  $query_game = $db-&gt;prepare("select distinct games as di from outdoor_games;");
                  $query_game-&gt;execute();
                  $data = $query_game-&gt;fetchAll(); 
  
              ?&gt;
              &lt;!DOCTYPE html&gt;
              &lt;html&gt;
               &lt;head&gt;
                  &lt;title&gt;Access form&lt;/title&gt;
                  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;   
                  &lt;script language="JavaScript"&gt;  &lt;/script&gt;
               &lt;/head&gt;
               &lt;body&gt;
                  &lt;form action="&lt;?php $_SERVER['PHP_SELF'];?&gt;"  method="post"&gt;
                  &lt;h2 style="text-align:center;"&gt;Test Form&lt;/h2&gt;
  
                  &lt;fieldset style="width: 1000px;"&gt;
  
                            &lt;legend&gt;&lt;b&gt; Source Profile&lt;/b&gt;&lt;/legend&gt;
  
                              &lt;TABLE id="STable" width="350px" border="1"&gt;
                              &lt;tr&gt;
                                  &lt;th bgcolor="WHITESMOKE"&gt;Student_ide&lt;/th&gt;
                                  &lt;th bgcolor="WHITESMOKE"&gt;Student_Name&lt;/th&gt;
                                  &lt;th bgcolor="WHITESMOKE"&gt;Game Id &lt;/th&gt;
                              &lt;/tr&gt;
                              &lt;TR&gt;
                                  &lt;td&gt;&lt;input type= "text" name= "Stu_Id[]" value=1 /&gt; &lt;/td&gt;
                                   &lt;td&gt;&lt;input type= "text" name= "Stu_Name[]"  /&gt; &lt;/td&gt;
                                   &lt;td&gt;&lt;select name= "Game_id[]" /&gt; 
                                          &lt;option value=""&gt;&lt;b&gt;Games&lt;/b&gt;&lt;/option&gt;
                                              &lt;?php foreach ($data as $row){echo '&lt;option value="' . $row['di'] . '"&gt;' . $row ['di'] . '&lt;/option&gt;';} ?&gt;
                                      &lt;/select&gt;
                              &lt;/tr&gt;    
                              &lt;/td&gt;
                              &lt;/TR&gt;&lt;/TABLE&gt;&lt;/br&gt; 
                              &lt;label&gt;No. of Students &lt;input type= "text" id="s_cnt" name= "d_Count"&gt;&lt;/label&gt;
                              &lt;button type="button" class='loadgames' &gt;Load Games&lt;/button&gt;
                              &lt;input type="submit" name ="add_SP" value ="Add Student Info" style="float: right;" /&gt; &lt;/br&gt; &lt;/br&gt;
  
                   &lt;/fieldset &gt;&lt;/br&gt; &lt;/br&gt;
                   &lt;input type="submit" name ="exit" value ="EXIT"  /&gt;
  
              &lt;/form&gt;
              &lt;script&gt;   
  
               $(".loadgames").on('click',function(){
                          var num = $("#s_cnt").val();
                          $("#STable tr").slice(2).remove();
                          for (var i = 2; i &lt;= num; i++) 
                          {
                              var data = "&lt;tr&gt;&lt;td&gt;&lt;input type='text' id='Stu_Id"+i+"' class='Stu_Id' name='Stu_Id[]' value = "+i+"  /&gt;&lt;/td&gt;&lt;td&gt;&lt;input type='text' id='Stu_Name"+i+"' name='Stu_Name[]'  /&gt;&lt;/td&gt; &lt;td&gt;&lt;select name= 'Game_id[]' /&gt;&lt;option value=""&gt;&lt;b&gt;Games&lt;/b&gt;&lt;/option&gt;"+&lt;?php foreach ($data as $row){echo '&lt;option value="' . $row['di'] . '"&gt;' . $row ['di'] . '&lt;/option&gt;';} ?&gt;+"&lt;/select&gt;&lt;/tr&gt;";
                              $("#STable").append(data);
                          }
                  });
  
              &lt;/script&gt;
               &lt;/body&gt;
              &lt;/html&gt;
  </code></pre>