what is the way when add new row in table to make script connect with element in new row not only at first row?

Question

what is the way when add new row in table to make script connect with element in new row not only at first row? the script connect only with element "textbox" in the first row only

 function GetSelectedvalues (el) {
            var select = document.getElementsByClassName ('js-example-basic-multiple')[0];
            var result = "";
            var options = select && select.options;
            var opt;
            for (var i = 0; i < select.options.length; i++) {
                opt = options[i];
                var isSelected = select.options[i].selected;
                isSelected = (isSelected)? opt.value : "0";
                result +=    isSelected  ;
            }

            document.getElementById ('textbox').value=result;

        }

//add row
function addmaintable() {

    $('#datatablereqstsched').append(
        '<tbody>' +
        '<tr class="parent" id="parent">' +

// here text box
        '<td width="60%"><div class="input-group"> <label class="ckbox mg-t-10" title="Daily" ><input type="checkbox" id="chk1"  onclick="check(\'chk1\')" ><span calss="mg-t-0">Daily</span>  </label><div class="input-group-prepend" style="width:80%"><select class="js-example-basic-multiple col-md-4 form-control" name="states[]" multiple="multiple"style="width: 100%" onchange="GetSelectedvalues(event);" > <option value="1">MON</option> <option value="2">TUE</option> <option value="3">WED</option> <option value="4">THU</option><option value="5">FRI</option><option value="6">SAT</option><option value="7">SUN</option> </select></div><input type="text" class="form-control txtv" value="" placeholder="0000000" id="textbox" disabled></div> </td>' +
        '</tr>' +
        '</tbody>');

        $('.js-example-basic-multiple').select2();

    }
 function check(chk) {
            var checkb = document.getElementById(chk);
            if (checkb.checked == true) {
                document.getElementById('textbox').value = "1234567";
                $(".js-example-basic-multiple").prop("disabled", true);
            }
            else {
                document.getElementById('textbox').value = "0000000";
                $(".js-example-basic-multiple").prop("disabled", false);
                $(".js-example-basic-multiple").val(null).trigger('change');
            }
        }

Answer 1

You are explicitly targetting the first select each time you call the GetSelectedvalues function:

var select = document.getElementsByClassName ('js-example-basic-multiple')[0];

I think you should rather leverage the event argument to get the current changing select:

const tBody = '<tbody>'
+    '<tr class="parent" id="parent">'
+        '<td width="60%">'
+            '<div class="input-group">'
+                '<label class="ckbox mg-t-10" title="Daily">'
+                    '<input type="checkbox" id="chk1"  onclick="check(\chk1\)" >'
+                    '<span calss="mg-t-0">Daily</span>'
+                '</label>'
+                '<div class="input-group-prepend" style="width:80%">'
+                    '<select class="js-example-basic-multiple col-md-4 form-control" name="states[]" multiple="multiple" style="width: 100%" onchange="GetSelectedvalues(event);">'
+                        '<option value="1">MON</option>'
+                        '<option value="2">TUE</option>'
+                        '<option value="3">WED</option>'
+                        '<option value="4">THU</option>'
+                        '<option value="5">FRI</option>'
+                        '<option value="6">SAT</option>'
+                        '<option value="7">SUN</option>'
+                    '</select>'
+                '</div>'
+                '<input type="text" class="form-control txtv" value="" placeholder="0000000" id="textbox" disabled>'
+            '</div>'
+        '</td>'
+    '</tr>'
+'</tbody>'

function GetSelectedvalues(event) {
    // Here you are selecting only the first select with the class "js-example-basic-multiple"
    var select = document.getElementsByClassName('js-example-basic-multiple')[0];
    // You are better off selecting the current changing select using the argument event
    select = event.target;
    var result = "";
    var options = select && select.options;
    var opt;
    for (var i = 0; i < select.options.length; i++) {
        opt = options[i];
        var isSelected = select.options[i].selected;
        isSelected = (isSelected) ? opt.value : "0";
        result += isSelected;
    }
    document.getElementById('textbox').value = result;
}

//add row
function addmaintable() {
    $('#datatablereqstsched').append(tBody);
    $('.js-example-basic-multiple').select2();
}

Edit
Now you need a way to know which textbox to update, based on currently changing select. And the same thing for all other inputs, like the checkbox at the top.
One way to do that could be this:

 const tBodyTemplate = '<tbody>' + '<tr class="parent" id="parent">' + '<td width="60%">' + '<div class="input-group">' + '<label class="ckbox mg-t-10" title="Daily">' + '<input type="checkbox" id="chk" onclick="check(chk)" >' + '<span calss="mg-t-0">Daily</span>' + '</label>' + '<div class="input-group-prepend" style="width:80%">' + '<select data-target="textbox" class="js-example-basic-multiple col-md-4 form-control" name="states[]" multiple="multiple" style="width: 100%" onchange="GetSelectedvalues(event);">' + '<option value="1">MON</option>' + '<option value="2">TUE</option>' + '<option value="3">WED</option>' + '<option value="4">THU</option>' + '<option value="5">FRI</option>' + '<option value="6">SAT</option>' + '<option value="7">SUN</option>' + '</select>' + '</div>' + '<input type="text" class="form-control txtv" value="" placeholder="0000000" id="textbox" disabled>' + '</div>' + '</td>' + '</tr>' +'</tbody>' function GetSelectedvalues(event) { // Here you are selecting only the first select with the class "js-example-basic-multiple" var select = document.getElementsByClassName('js-example-basic-multiple')[0]; // You are better off selecting the current changing select using the argument event select = event.target; var textboxId = select.dataset.target; var result = ""; var options = select && select.options; var opt; for (var i = 0; i < select.options.length; i++) { opt = options[i]; var isSelected = select.options[i].selected; isSelected = (isSelected)? opt.value: "0"; result += isSelected; } document.getElementById(textboxId).value = result; } let rowCount = 0; //add row function addmaintable() { rowCount++; var tBody = tBodyTemplate.replace(/textbox/g, 'textbox' + rowCount).replace(/chk/g, 'chk' + rowCount); $('#datatablereqstsched').append(tBody); } function check(v) { console.log(v); } $('#add-row').click(addmaintable);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="datatablereqstsched"></table> <button id="add-row">Add one row</button>