Call a JS method via EventListener

Question

I have a JS function where I'm dynamically creating a set of buttons. The buttons are placed in rows such that everytime a button is clicked, that particular row needs to be added to another table below that division.

I am able to successfully add only the first row of the original table to the intended table below the check division. All the others are not working. I'm not sure why the event-listener is not being called for all the Select buttons.

Dynamically creating the Original Table

for(var q=0;q<attributesNameArray.length;q++)
{
    var chkID = "chkID"+elementID+attributesNameArray[q];
    var aggComboID = "Aggregate-Combo"+q;
    var attrNameID = "attrName"+q;
    var attrTypeID = "attrType"+q;
    var btnID = q+"addSelectedColumnBtn";
    chkname = attributesNameArray[q];
    chkVal = attributesDataTypeArray[q];

    var asNameLbl = "usr"+q;
    asNameid = asNameLbl;

    $("#tableSelectedAttributes").append(
            "<tr>"+
                "<td id='"+attrNameID+"'>"+attributesNameArray[q]+"</td>"+
                "<td id='"+attrTypeID+"'>"+attributesDataTypeArray[q]+"</td>"+
                "<td><input type='text' id='"+asNameid+"'></td>"+
                "<td>"+
                    "<select id='"+aggComboID+"' name='Aggregate-Combo' class='form-control'>"+
                        "<option value='Select an option'>Select an option</option>"+
                        "<option value='MIN'>MIN</option>"+
                        "<option value='MAX'>MAX</option>"+
                        "<option value='SUM'>SUM</option>"+
                        "<option value='AVG'>AVG</option>"+
                        "<option value='COUNT'>COUNT</option>"+
                    "</select>"+
                "</td>"+
                "<td><button id='addSelectedColumnBtn' name='"+btnID+"' class='btn btn-info'>Select</button></td>"+
            "</tr>"+
          "</div>"
     );
}
...

document.getElementById("addSelectedColumnBtn").addEventListener("click", function() {
    displaySelectedColumns(this,fromNameSt);
}, false);

displaySelectedColumns(this,fromNameSt)

   function displaySelectedColumns(sender,fromNameSt)
   {
       var clickedelemId=sender.name;
       q = clickedelemId.charAt(0);


       var aggComboID = "Aggregate-Combo"+q;
       var attrNameID = "attrName"+q;
       var attrTypeID = "attrType"+q;
       var asNameLbl = "usr"+q;
       var selTableId1 = "sel1"+selectedColumnCount;
       var selTableId2 = "sel2"+selectedColumnCount;
       var selTableId3 = "sel3"+selectedColumnCount;
       var selTableId4 = "sel4"+selectedColumnCount;

       var attributeName = document.getElementById(attrNameID).innerText;
       var attributeType = document.getElementById(attrTypeID).innerHTML;
       var selectedAsName = document.getElementById(asNameLbl).value;
       var choice=document.getElementById(aggComboID);
       var selectedAggregate = choice.options[choice.selectedIndex].text;

       alert(attributeName+" "+attributeType+" "+selectedAsName+" "+selectedAggregate);

       if(selectedAggregate == "Select an option")
       {
           if(selectedAsName == "" || selectedAsName == " " || selectedAsName == "null" || selectedAsName == "undefined" ||selectedAsName == null || selectedAsName == undefined)
           {
               alert("As name: false");
               $("#displaySelectedColumnTable").append(
                       "<tr>"+
                       "<td id='"+selTableId1+"'>"+attributeName+"</td>"+
                       "<td id='"+selTableId2+"'>"+attributeType+"</td>"+
                       "<td id='"+selTableId3+"'></td>"+
                       "<td id='"+selTableId4+"'></td>"+
                       "</tr>"
               );
           }
           else
           {
               $("#displaySelectedColumnTable").append(
           ...

Any suggestions in this regard will be highly appreciated.

Answer 1

Id's have to be unique across your html page, addSelectedColumnBtn is repeated for every button.

Make it a unique id first by appending the same q variable which you added for the select element

"<td><button id='addSelectedColumnBtn_" + q + "' name='"+btnID+"' class='btn btn-info'>Select</button></td>"+

Now call this addEventListener inside the for-loop only for all buttons

document.getElementById("addSelectedColumnBtn_" + q).addEventListener("click", function() {
    displaySelectedColumns(this,fromNameSt);
}, false);