html - Selecting a dynamically added row in jquery -

i trying target last created row , run query change 1 of columns data used database. currently, once input has been entered first column, column (measure) changed, works first row , none of dynamically added rows. entering first ingredient

entering ingredient

the jquery code using:

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

});

table row involved:

<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 ingredient first!</option></select>             <td><input type="button" id="add" value="add" /></td>         </tbody>     </tr> 

when applying changes first row, after adding more rows, change occurs in last row's columns. there reason why query not run when making changes in other rows?