title: jQuery/Ajax: Using ajax to populate select boxes in a dynamic form
body: <p>HTML:</p>
  
  <pre><code>&lt;form name="order" action="order_stuff.php" method="post"&gt;
  &lt;table id="myTable"&gt;
  &lt;thead&gt;
  &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;th&gt;Group&lt;/th&gt;&lt;th&gt;Item&lt;/th&gt;&lt;th&gt;Quantity&lt;/th&gt;&lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
  &lt;tr&gt;
  &lt;td&gt;1&lt;/td&gt;
  &lt;td&gt;
  &lt;select name="group1" id="ctlGroup"&gt;
  &lt;option value="dimensioner"&gt;Dimensioner&lt;/option&gt;
  &lt;option value="scanner"&gt;Scanner&lt;/option&gt;
  &lt;option value="scale"&gt;Scale&lt;/option&gt;
  &lt;option value="camera"&gt;Cameras&lt;/option&gt;
  &lt;option value="computer"&gt;Computer&lt;/option&gt;
  &lt;option value="network"&gt;Network&lt;/option&gt;
  &lt;option value="cables"&gt;Cables&lt;/option&gt;
  &lt;option value="Other"&gt;Other&lt;/option&gt;
  &lt;/select&gt;
  &lt;/td&gt;
  &lt;td&gt;
  &lt;select name="item1" id="ctlItem"&gt;
  &lt;option value=""&gt;&lt;/option&gt;
  &lt;/select&gt;
  &lt;/td&gt;
  &lt;td&gt;
  &lt;input type="text" name="quantity1" value="" /&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;tfoot&gt;
  &lt;tr&gt;&lt;td&gt;&lt;a href="#" id="addVar"&gt;Add Item&lt;/a&gt;&lt;/td&gt;&lt;td colspan="2"&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="submit" name="submit" value="Place Order" /&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/tfoot&gt;
  &lt;/table&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>JAVA:</p>
  
  <pre><code>$('form').on('click', '.removeVar', function(){
      $(this).parent().remove();
  });
  
  //add a new node
  var varCount = 2;
  $('#addVar').on('click', function(){
     $node = '&lt;tr&gt;&lt;td&gt;'+varCount+'&lt;/td&gt;&lt;td&gt;&lt;select name="group'+varCount+'" id="ctlGroup"&gt;       &lt;option value="dimensioner"&gt;Dimensioner&lt;/option&gt;&lt;option value="scanner"&gt;Scanner&lt;/option&gt;&lt;option value="scale"&gt;Scale&lt;/option&gt;&lt;option value="camera"&gt;Cameras&lt;/option&gt;&lt;option value="computer"&gt;Computer&lt;/option&gt;&lt;option value="network"&gt;Network&lt;/option&gt;&lt;option value="cables"&gt;Cables&lt;/option&gt;&lt;option value="Other"&gt;Other&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;select name="item'+varCount+'" id="ctlItem&gt;&lt;option value=""&gt;&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="quantity'+varCount+'" value="" /&gt;&lt;/td&gt;&lt;/tr&gt;';
     $("#invars").val(varCount);
     $('#myTable &gt; tbody:last').append($node);
  
     varCount++;
  });
  
  $("select#ctlGroup").change(function() {
      $.getJSON("/ajax-select.php",{id: $(this).val(), ajax: 'true'}, function(j){
      var options = '';
  
          for (var i = 0; i &lt; j.length; i++) {
          options += '&lt;option value="' + j[i].title + '"&gt;' + j[i].title + '&lt;/option&gt;';
      }
  
          $("select#ctlItem").html(options);
      });
  });
  
  $("#myTable").on('change', "#ctlGroup", function(){
      $.getJSON("/ajax-select.php",{id: $(this).val(), ajax: 'true'}, function(j){
      var options = '';
  
          for (var i = 0; i &lt; j.length; i++) {
          options += '&lt;option value="' + j[i].title + '"&gt;' + j[i].title + '&lt;/option&gt;';
      }
  
          $("select#ctlItem").html(options);
      });
  });
  </code></pre>
  
  <p>I am trying to create a dynamic form with a dynamic select that is changed based on the first select. My problem is that the first row that is created when the page loads works fine but when i add the second row and i change the first select in that row it resets the dynamic select in the first row. How can i change the javascript so the first select in each row only affects the second select in the same row?</p>
  
  <p>Thank you for any assistance with this.</p>