Getting Dynamically added table row selected Id from the Javascript

Question

In my application, Here adding new rows with the dynamic ID assigned from the loop.

In the view, I'm creating a Purchase Order, and here I adding the rows to the table.

So Here When the Select value changes, I want to get that changed row Id and the Selected Id for a Javascript to send it to the controller.

How to get that in javascript?

 var counter = 1;

  $(function () {

        $("#add").click(function () {
            var newRow = $(
                '<tr id="tablerow' +
                counter +
                '"> ' +
                "<td>" +
                '<label id="CountItems"><strong>' +
                counter +
                "</strong></label>" +
                "</td>" +
                '<td width="40%">' +
                '<select class="form-select js-dropdown" name="Item_Id[' +
                counter +
                ']" id="ItemId"' + counter+ 'required="required" ' +
                "</select>" +
                "</td>" +
                '<td width="10%">' +
                '<input type="text" class="form-control" name="Qty[' +
                counter +
                ']" value="1" id="Qty"' + counter + ' required="required" />' +
                "</td>" +
                '<td width="10%">' +
                '<input type="text" class="form-control" name="AcidStables[' +
                counter +
                ']" value="" required="required" />' +
                "</td>" +
                '<td width="20%">' +
                '<input type="text" class="form-control" name="Unit_Price[' +
                counter +
                ']" value="0.00" id="UnitPrice"' + counter + '  required="required" />' +
                "</td>" +
                '<td width="20%">' +
                '<input type="text" class="form-control" name="Line_Total[' +
                counter +
                ']" value="0.00" id="LineTotal"' + counter + ' required="required" />' +
                "</td>" +
                "<td>" +
                '<button type="button" class="btn btn-danger" onclick="removeTr(' +
                counter +
                ');">x</button>' +
                "</td>" +
                "</tr>"
            );

            var selectElement = newRow.find("select"); // Find the <select> element in the new row

            // Populate the <select> element with options
            dropdownOptions.forEach(function (option) {

                var optionElement = $("<option>").val(option.Value).text(option.Text);

                selectElement.append(optionElement);
            });

            newRow.appendTo("#submissionTable");
            counter++;
            return false;
        });

Answer 1

I modified your code in some places:

1- Put row content in a variable to improve readability

2- Corrected the way each row's <select> is being populated.

And it's working.

// fake values for dropdown only for testing
var dropdownOptions = [{
    Text: "a",
    Value: "1"
  },
  {
    Text: "b",
    Value: "2"
  },
  {
    Text: "c",
    Value: "3"
  }
];

var counter = 1;

$(function() {

  $("#add").click(function() {
    // create a row, add content to it and append to table
    $('<tr id="tableRow' + counter +'">' + rowContent + "</tr>").appendTo("#submissionTable");

    counter++;
    return false;
  });
});

// content of each row
var rowContent = "<td>" +
  '<label id="CountItems"><strong>' +
  counter +
  "</strong></label>" +
  "</td>" +
  '<td width="40%">' +
  '<select onchange="sendInfo(this)" class="form-select js-dropdown" name="Item_Id[' +
  counter +
  ']" id="ItemId"' + counter + 'required="required"> ' + populate() +
  "</select>" +
  "</td>" +
  '<td width="10%">' +
  '<input type="text" class="form-control" name="Qty[' +
  counter +
  ']" value="1" id="Qty"' + counter + ' required="required" />' +
  "</td>" +
  '<td width="10%">' +
  '<input type="text" class="form-control" name="AcidStables[' +
  counter +
  ']" value="" required="required" />' +
  "</td>" +
  '<td width="20%">' +
  '<input type="text" class="form-control" name="Unit_Price[' +
  counter +
  ']" value="0.00" id="UnitPrice"' + counter + '  required="required" />' +
  "</td>" +
  '<td width="20%">' +
  '<input type="text" class="form-control" name="Line_Total[' +
  counter +
  ']" value="0.00" id="LineTotal"' + counter + ' required="required" />' +
  "</td>" +
  "<td>" +
  '<button type="button" class="btn btn-danger" onclick="removeTr(' +
  counter +
  ');">x</button>' +
  "</td>";


//Populate the <select> element with options
// this function is called inside the rowContent variable above 
function populate() {
  var options = "";
  dropdownOptions.forEach(function(option) {

    options += $("<option>").val(option.Value).text(option.Text).get(0).outerHTML;


  });
  return options;
}

// this function is set for onchange event of <select> inside the rowContent variable above
function sendInfo(e) {
  console.log(e.name, e.value);
  console.log(e.closest("tr").id);
  // todo: send data to wherever is needed
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" id="add">Add</button>
<table id="submissionTable">

</table>

update

Sorry, it seems I forgot about row's id in the original answer.

Well, to get row.id you can use element.closest() function.

I updated my code snippet as below :

1- gave each row an id (like you did in the question):

$('<tr id="tablerow' + counter +'">' + rowContent + "</tr>").appendTo("#submissionTable");

2- retrieved row.id in the sendInfo() function using closest():

console.log(e.closest("tr").id);