jQuery clone row - 在特定字段中插入值

Question

Need some assistance here.

So basically I've got a form which has below fields. Once "Add More Products" button is clicked it clones the product, stock and qty fields and creates a new row. The Product field is a dropdown list of products (query from mysql)

What I need help with is if someone chooses a product I need it to query the database and show stock levels on the chosen product. I've got it working with one row but can't get it to work on the cloned elements (respectively). Code is below. Would really appreciate some assistance.

<select name="product[]" id="product">
    <option value="product 1"> Product 1</option>
    <option value="product 2"> Product 2</option>
    <option value="product 3"> Product 3</option>
    <option value="product 4"> Product 4</option>
</select>
<input type="text" id="stockclass="inputfield" name="stock" size="8" />


$('#product').on("change", function() {
    var val = $(this).val();
    $("#stock").val(val2);                        
});

$("#add").on("click", function() {
    var row = $('#item tbody > tr:last').clone(true);            
    row.insertAfter('#itemsTable tbody > tr:last');
   return false;            
});

Answer 1

Use .on() because .live() is depreciated from now on.

$(document).on('click','SELECTOR',function(){ /*...*/ });

You are cloning DOMs with the same ID that is totally wrong. Use Class.

Example

<select name="product[]" class="product">
    <option value="product 1"> Product 1</option>
    <option value="product 2"> Product 2</option>
    <option value="product 3"> Product 3</option>
    <option value="product 4"> Product 4</option>
</select>
<input type="text" class="quantity inputfield" name="quantity[]" size="8" value="" />
<input type="text" class="target_price inputfield" name="target_price[]" size="8" value="" />
<input type="text" class="stock_availability inputfield" name="stock_availability[]" size="8" value="" readonly="readonly" />

Now other one is you have click event for selectbox that is wrong it should be change event.

AS

$('.product').on('change',function()
{

    $.ajax(
    {
        //ajax params and options and in success set value
    });

});