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>

JAWA:

$('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);
    });
});

Próbuję utworzyć dynamiczną formę z dynamicznym wyborem, który zmienia się na podstawie pierwszego wyboru. Moim problemem jest to, że pierwszy wiersz, który jest tworzony, gdy ładuje się strona, działa dobrze, ale kiedy dodam drugi wiersz i zmieniam pierwszy wybór w tym wierszu, resetuje zaznaczenie dynamiczne w pierwszym wierszu. Jak mogę zmienić javascript, aby pierwszy wybór w każdym wierszu wpłynął tylko na drugi wybór w tym samym wierszu?

Dziękujemy za wszelką pomoc w tym zakresie.