How to handle auto-populate dropdown for dynamic table row in JavaScript?

Question

I am working on adding dynamic table rows. There is a button for adding table rows when a user clicks on that button. So there I have three dropdowns. Each dropdown have some ID. So I have implemented the things where I am trying to auto populate first dropdown on that button click. So I am clicking add more rows then for second row, empty dropdown is created.

I want that whenever a user clicks on add more rows, then each dropdown of rows should be auto-populated. I hope that I am clear with my words.

Below is the script to load data in dropdown and to create rows dynamically:

$(function() {
    $("#btnAdd").bind("click", function() {
        var div = $("<tr />");
        div.html(GetDynamicTextBox(""));
        $("#TextBoxContainer").append(div);
        var url = "api/get/activecompany";
        $.post(url, {

        }, function(data, status) {
            if (data.status == "OK") {
                if (data.statusCode == 1) {
                     var list = data.response;
                    var option = "<option selected disabled>Select Company</option>";
                    if(list.length > 0){
                        for(var i = 0; i < list.length; i++){
                            var content = "<option value='"+list[i].companyid+"'>"+list[i].companyname+"&nbsp;<span>("+list[i].dotnumber+")</span></option>";
                                        option = option + content;
                            }
                        }  
                        document.getElementById('lcompanyselect').innerHTML = option;
                    } else {
                            var error = data.responseMessage;
                            swal(error, "", "error");
                        }
                } else {
                        var error = data.responseMessage;
                        swal(error, "", "error");
                    }
                });
            });
            $("body").on("click", ".remove", function() {
                $(this).closest("tr").remove();
            });
    });

function GetDynamicTextBox(value) {
    return '<td class="">'+'<select class="js-example-placeholder-single js-states form-control" id="lcompanyselect" onchange="getDriverAndTruck()";></select>'
                        +'<input type="button" value="+" class="qty-plus" data-toggle="modal" data-target="#edit_co"></td>'
                        +'<td><select class="js-example-placeholder-single js-states form-control" id="ldriverselect"></select>'
                        +'<input type="button" value="+" class="qty-plus" data-toggle="modal" data-target="#edit_driver"></td>'
                        +'<td class=""><select class="js-example-placeholder-single js-states form-control" id="ltruckselect"></select>'
                        +'<input type="button" value="+" class="qty-plus" data-toggle="modal" data-target="#edit_truck"></td>'
                        + '<td><input name = "tripnumber" type="text" class="form-control" id="ltripnumber"/></td>'
                        +'<td><select id="lsubtrip" name="subtrip" class="js-example-placeholder-single js-states form-control"><option disabled selected></option>'
                        +'<option value="1">1</option><option value="2">2</option><option value="3">3</option></select>'
                        + '<td><input name = "date" type="date" class="form-control" id="ldate"/></td>'
                        + '<td><input name = "pickupcity" type="date" class="form-control" id="lpickupcity"/></td>'
                        + '<td><input name = "pickupstate" type="date" class="form-control" id="lpickupstate"/></td>'
                        + '<td><input name = "deliverydate" type="date" class="form-control" id="ldeliverydate"/></td>'
                        + '<td><input name = "delivercity" type="text" class="form-control" id="ldelivercity"/></td>'
                        + '<td><input name = "deliverstate" type="text" class="form-control" id="ldeliverstate"/></td>'
                        + '<td><input name = "loadnumber" type="text" class="form-control" id="lloadnumber"/></td>'
                        + '<td><input name = "loadrate" type="text" class="form-control" id="lloadrate" onkeyup="lcount();"/><span id="lerrormessage"></span></td>'
                        + '<td><input name = "dispatchfee" type="text" class="form-control" id="ldispatchfee" readonly/></td>'
                        + '<td><input name = "fuel" type="text" class="form-control" id="lfuel"/></td>'
                        + '<td><input name = "cardfee" type="text" class="form-control" id="lcardfee"/></td>'
                        + '<td><input name = "onloadrepair" type="text" class="form-control" id="lonloadrepair"/></td>'
                        + '<td><input name = "shoprepair" type="text" class="form-control" id="lshoprepair"/></td>'
                        + '<td><input name = "trailerrent" type="text" class="form-control" id="ltrailerrent"/></td>'
                        + '<td><input name = "comcheck" type="text" class="form-control" id="lcomcheck"/></td>'
                        + '<td><input name = "advance" type="text" class="form-control" id="ladvance"/></td>'
                        + '<td><input name = "miscellenous" type="text" class="form-control" id="lmiscellenous"/></td>'
                        + '<td><input name = "misc1" type="text" class="form-control" id="lmisc1"/></td>'
                        + '<td><input name = "misc2" type="text" class="form-control" id="lmisc2"/></td>'
                        + '<td><input name = "misc3" type="text" class="form-control" id="lmisc3"/></td>'
                        + '<td><input name = "misc4" type="text" class="form-control" id="lmisc4"/></td>'
                        + '<td><input name = "total" type="text" class="form-control" id="ltotal" readonly/></td>'
                        + '<td><input name = "layover" type="text" class="form-control" id="llayover"/></td>'
                        + '<td><input name = "addtl1" type="text" class="form-control" id="laddtl1"/></td>'
                        + '<td><input name = "addtl2" type="text" class="form-control" id="laddtl2"/></td>'
                        + '<td><input name = "addtl3" type="text" class="form-control" id="laddtl3"/></td>'
                        + '<td><input name = "subtotal" type="text" class="form-control" id="lsubtotal" readonly/></td>'
                        + '<td><input name = "paymentmode" type="text" class="form-control" id="lpaymentmode"/></td>'
                        + '<td><input name = "pay" type="text" class="form-control" id="lpay"/></td>'
                        + '<td><input name = "notes" type="text" class="form-control" id="lnotes"/></td>'
                        + '<td><input name = "grandtotal" type="text" class="form-control" id="lgrandtotal" readonly/></td>'
                        + '<td><button type="button" class="btn btn-outline-info text-info" onclick="savetriplist();">Submit</button>' 
                        +'<button type="button" class="btn btn-outline-danger text-danger remove">Remove</button></td>'
            }

Answer 1

The one thing I have observed in your code is, its looking for a dropdown with id as lcompanyselect and then fills it with options. when the code runs for the first time it adds the dropdown on the dom, but when the code runs second time (when add button clicked) its filling the same dropdown which was added earlier, because the code is looking for element with id as lcompanyselect and it has found one.

document.getElementById('lcompanyselect').innerHTML = option;

Instead, I would suggest to have a placeholder for dropdown in your, function

GetDynamicTextBox(value)
<select class="js-example-placeholder-single js-states form-control" id="lcompanyselect" onchange="getDriverAndTruck()";>{Placeholder}</select>

and in code when you are finding the element, instead replace the {placeholder} with options html. This is how modified code looks.

$(function() {
    $("#btnAdd").bind("click", function() {
        var div = $("<tr />");
        var dynamicTextboxHtml = div.html(GetDynamicTextBox(""));
        
        var url = "api/get/activecompany";
        $.post(url, {

        }, function(data, status) {
            if (data.status == "OK") {
                if (data.statusCode == 1) {
                     var list = data.response;
                    var option = "<option selected disabled>Select Company</option>";
                    if(list.length > 0){
                        for(var i = 0; i < list.length; i++){
                            var content = "<option value='"+list[i].companyid+"'>"+list[i].companyname+"&nbsp;<span>("+list[i].dotnumber+")</span></option>";
                                        option = option + content;
                            }
                        }  

                       
            dynamicTextboxHtml.replace("{OptionsPlaceholder}",content);
            $("#TextBoxContainer").append(dynamicTextboxHtml);
       dynamicTextboxHtml = '';


                    } else {
                            var error = data.responseMessage;
                            swal(error, "", "error");
                        }
                } else {
                        var error = data.responseMessage;
                        swal(error, "", "error");
                    }
                });
            });
            $("body").on("click", ".remove", function() {
                $(this).closest("tr").remove();
            });
    });

function GetDynamicTextBox(value) {
    return '<td class="">'+'<select class="js-example-placeholder-single js-states form-control" id="lcompanyselect" onchange="getDriverAndTruck()";>{OptionsPlaceholder}</select>'
                        +'<input type="button" value="+" class="qty-plus" data-toggle="modal" data-target="#edit_co"></td>'
                        +'<td><select class="js-example-placeholder-single js-states form-control" id="ldriverselect"></select>'
                        +'<input type="button" value="+" class="qty-plus" data-toggle="modal" data-target="#edit_driver"></td>'
                        +'<td class=""><select class="js-example-placeholder-single js-states form-control" id="ltruckselect"></select>'
                        +'<input type="button" value="+" class="qty-plus" data-toggle="modal" data-target="#edit_truck"></td>'
                        + '<td><input name = "tripnumber" type="text" class="form-control" id="ltripnumber"/></td>'
                        +'<td><select id="lsubtrip" name="subtrip" class="js-example-placeholder-single js-states form-control"><option disabled selected></option>'
                        +'<option value="1">1</option><option value="2">2</option><option value="3">3</option></select>'
                        + '<td><input name = "date" type="date" class="form-control" id="ldate"/></td>'
                        + '<td><input name = "pickupcity" type="date" class="form-control" id="lpickupcity"/></td>'
                        + '<td><input name = "pickupstate" type="date" class="form-control" id="lpickupstate"/></td>'
                        + '<td><input name = "deliverydate" type="date" class="form-control" id="ldeliverydate"/></td>'
                        + '<td><input name = "delivercity" type="text" class="form-control" id="ldelivercity"/></td>'
                        + '<td><input name = "deliverstate" type="text" class="form-control" id="ldeliverstate"/></td>'
                        + '<td><input name = "loadnumber" type="text" class="form-control" id="lloadnumber"/></td>'
                        + '<td><input name = "loadrate" type="text" class="form-control" id="lloadrate" onkeyup="lcount();"/><span id="lerrormessage"></span></td>'
                        + '<td><input name = "dispatchfee" type="text" class="form-control" id="ldispatchfee" readonly/></td>'
                        + '<td><input name = "fuel" type="text" class="form-control" id="lfuel"/></td>'
                        + '<td><input name = "cardfee" type="text" class="form-control" id="lcardfee"/></td>'
                        + '<td><input name = "onloadrepair" type="text" class="form-control" id="lonloadrepair"/></td>'
                        + '<td><input name = "shoprepair" type="text" class="form-control" id="lshoprepair"/></td>'
                        + '<td><input name = "trailerrent" type="text" class="form-control" id="ltrailerrent"/></td>'
                        + '<td><input name = "comcheck" type="text" class="form-control" id="lcomcheck"/></td>'
                        + '<td><input name = "advance" type="text" class="form-control" id="ladvance"/></td>'
                        + '<td><input name = "miscellenous" type="text" class="form-control" id="lmiscellenous"/></td>'
                        + '<td><input name = "misc1" type="text" class="form-control" id="lmisc1"/></td>'
                        + '<td><input name = "misc2" type="text" class="form-control" id="lmisc2"/></td>'
                        + '<td><input name = "misc3" type="text" class="form-control" id="lmisc3"/></td>'
                        + '<td><input name = "misc4" type="text" class="form-control" id="lmisc4"/></td>'
                        + '<td><input name = "total" type="text" class="form-control" id="ltotal" readonly/></td>'
                        + '<td><input name = "layover" type="text" class="form-control" id="llayover"/></td>'
                        + '<td><input name = "addtl1" type="text" class="form-control" id="laddtl1"/></td>'
                        + '<td><input name = "addtl2" type="text" class="form-control" id="laddtl2"/></td>'
                        + '<td><input name = "addtl3" type="text" class="form-control" id="laddtl3"/></td>'
                        + '<td><input name = "subtotal" type="text" class="form-control" id="lsubtotal" readonly/></td>'
                        + '<td><input name = "paymentmode" type="text" class="form-control" id="lpaymentmode"/></td>'
                        + '<td><input name = "pay" type="text" class="form-control" id="lpay"/></td>'
                        + '<td><input name = "notes" type="text" class="form-control" id="lnotes"/></td>'
                        + '<td><input name = "grandtotal" type="text" class="form-control" id="lgrandtotal" readonly/></td>'
                        + '<td><button type="button" class="btn btn-outline-info text-info" onclick="savetriplist();">Submit</button>' 
                        +'<button type="button" class="btn btn-outline-danger text-danger remove">Remove</button></td>'
            }