php - how to set the value of same input filed but in different row through ajax

I have a form I can create a new row through jquery. The problem I'm facing is that when I select the product from dropdown it have to set the rate of this product to its next column. The first row does it fine. But when i create the new row and select the product it gives the correct value but sets value on first row's column. I don't know how to set value to corresponding column. Screenshot

As you can see in the picture I select the milk product, it sets the value to next column when I created the new row and select the product it sets value to the first row's column.

code of function which returns the dropdown values of product

function fill_unit_select_box($con)
{
    $output = '';
    $query = "SELECT * FROM `stock` INNER JOIN product ON stock.product_id = product.product_id
              WHERE stock.product_id = product.product_id ORDER BY product_name ASC";
    $query1=mysqli_query($con,$query);

    while($row=mysqli_fetch_array($query1))
    {
        $output .= '<option value="'.$row["product_id"].'">'.$row["product_name"].'</option>';
    }
    return $output;
}
Copy code

code of form created through jquery

$(document).on('click', '.add', function(){
            var html = '';
            html += '<tr>';
            html += '<td><select name="item_name[]" onchange="product_id(this)" class="form-control item_name"><option value="">Select Unit</option><?php echo fill_unit_select_box($con); ?></select></td>';
            html += '<td><input type="text" disabled name="item_per_unit_price[]" id="product_price" class="form-control item_per_unit_price input" /></td>';
            html += '<td><input type="text" name="item_quentity[]"  class="form-control item_quentity input" /></td>';
            /*html += '<td><input type="text" name="item_total_price[]"  class="form-control item_total_price" /></td>';*/
            html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
            $('#item_table').append(html);
        });
Copy code

code of onchange function which sets the value in price per unit

function product_id(str) {
        var id = str.value;
        $.ajax({
            type : "POST",
            url : "stock.php?page=stock_per_unit_price",
            data : {
                id:id
            },
          success: function (data) {
                console.log(data);
                $("#product_price").val(data);

            }
        });
    }
Copy code

$("#product_price").val(data); I don't know how to set value on same column of different row.