在jquery中选择动态添加的行

Question

我正在尝试定位最后创建的行并运行查询以使用数据库中使用的数据更改其中一列。目前，一旦输入输入到第一列，就会更改列（度量），但这仅适用于第一行而不适用于动态添加的行。 Entering first ingredient

Entering another ingredient

我正在使用的jquery代码：

$(function(){
$(".ingredients").on("change", ".auto_"+i, function(){
    var ingredient = $(this).val();
    $.ajax({
        url: "update_ingredients.php",
        type: "GET",
        data: {
            ingredient: ingredient
        },
        success: function(response){
            var data = JSON.parse(response);
            $('#measure_'+i)
                .find('option')
                .remove()
                .end()
                .append('<option value="' + data['GmWt_Desc1'] + '">' + data['GmWt_Desc1'] + '</option>')
                .val(data['GmWt_Desc1'])
                .append('<option value="' + data['GmWt_Desc2'] + '">' + data['GmWt_Desc2'] + '</option>')
                .val(data['GmWt_Desc2'])
            ;
        },
    });
});

}）;

涉及的表行：

<tr>
        <tbody class="ingredients">
            <td><input type="text" placeholder="e.g. Egg" name="ingredient[]" class="auto_0" required/></td>
            <td><input type="number" placeholder="Integer Value" name="measureNo[]"  required/></td>
            <td><select id="measure_0"><option value="Select ingredient">Select an ingredient first!</option></select>
            <td><input type="button" id="add" value="Add" /></td>
        </tbody>
    </tr>

将更改应用于第一行时，在添加更多行后，更改将在最后一行的列中进行。在其他任何行中进行更改时，是否有原因导致查询无法运行？