Getting Dynamically added table row selected Id from the Javascript

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;
});

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.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// 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
}

<!-- language: lang-html -->

<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>

<!-- end snippet -->

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);