jQuery/Ajax: l'Utilisation d'ajax pour remplir les zones de liste dans un formulaire dynamique

HTML:

<form name="order" action="order_stuff.php" method="post">
<table id="myTable">
<thead>
<tr><td></td><th>Group</th><th>Item</th><th>Quantity</th></tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<select name="group1" id="ctlGroup">
<option value="dimensioner">Dimensioner</option>
<option value="scanner">Scanner</option>
<option value="scale">Scale</option>
<option value="camera">Cameras</option>
<option value="computer">Computer</option>
<option value="network">Network</option>
<option value="cables">Cables</option>
<option value="Other">Other</option>
</select>
</td>
<td>
<select name="item1" id="ctlItem">
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="quantity1" value="" />
</td>
</tr>
</tbody>
<tfoot>
<tr><td><a href="#" id="addVar">Add Item</a></td><td colspan="2"></td><td><input type="submit" name="submit" value="Place Order" /></td></tr>
</tfoot>
</table>
</form>

JAVA:

$('form').on('click', '.removeVar', function(){
$(this).parent().remove();
});
//add a new node
var varCount = 2;
$('#addVar').on('click', function(){
$node = '<tr><td>'+varCount+'</td><td><select name="group'+varCount+'" id="ctlGroup">       <option value="dimensioner">Dimensioner</option><option value="scanner">Scanner</option><option value="scale">Scale</option><option value="camera">Cameras</option><option value="computer">Computer</option><option value="network">Network</option><option value="cables">Cables</option><option value="Other">Other</option></select></td><td><select name="item'+varCount+'" id="ctlItem><option value=""></option></select></td><td><input type="text" name="quantity'+varCount+'" value="" /></td></tr>';
$("#invars").val(varCount);
$('#myTable > 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 < j.length; i++) {
options += '<option value="' + j[i].title + '">' + j[i].title + '</option>';
}
$("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 < j.length; i++) {
options += '<option value="' + j[i].title + '">' + j[i].title + '</option>';
}
$("select#ctlItem").html(options);
});
});

Je suis en train de créer un formulaire dynamique avec une dynamique de sélectionner qui est modifiée en fonction du premier select. Mon problème est que la première ligne qui est créé lorsque le chargement de la page fonctionne très bien mais quand j'ajoute de la deuxième ligne, puis-je changer la première sélectionnez dans la ligne de réinitialiser la dynamique de la sélectionner dans la première rangée. Comment puis-je modifier le javascript pour la première sélectionner dans chaque ligne affecte seulement la deuxième sélection dans la même ligne?

Je vous remercie pour toute l'aide avec cela.