It is possible insert different value to different row table? when add row and insert item, the 1st row item will change same like 2nd row item.

var count = $(".itemRow").length;
$(document).on("click", "#addRows", function () {
    count  ;
    var htmlRows = "";
    htmlRows  = "<tr>";
    htmlRows  = '<td><input  type="checkbox"></td>';
    htmlRows  =
        '<td><div style="display: flex;"><input style="width:60%; margin-top:0.5%; margin-left:0.5%" type="text" name="productName[]" id="productName_'  count  '"  autocomplete="off">&nbsp <p  style="padding-top:1%;"> or <a href="#" data-target="#myModal">select a product</a></p></div></td>';
    htmlRows  =
        '<td><input type="number" name="quantity" id="quantity_'  
        count  
        '"  autocomplete="off"></td>';
    htmlRows  =
        '<td><input type="number" name="price" id="price_'  
        count  
        '"  autocomplete="off"></td>';
    htmlRows  =
        '<td><input type="number" name="total" id="total_'  
        count  
        '"  autocomplete="off"></td>';
    htmlRows  = "</tr>";
    $("#invoiceItem").append(htmlRows);
});

$(document).on("click", "#modal", function (){
        var productName = $("#productname").val();
        var nameProduct = productName.split('||')[0];
        var pPrice = pr`your text`oductName.split('||')[1];
        $("[id^=productName_]").val(nameProduct);
        $("[id^=price_]").val(pPrice);
    });

1st row

when add 2nd row and insert item

Expected

CodePudding user response：

$("[id^=productName_]").val(nameProduct); this part of your code replaces the entire elements instead of just one.

Modifying this line to $("#productName_" count ).val(nameProduct); would solve your issue.