Selecting a dynamically generated string

On button click, I want to send data to the server for a certain line. Rows in the table are created dynamically

There is the following code:

<tr class="ordertr table-bordered">
<td id="recid" class="d-none"><?=$row['RecId']?></td>
<td class="ps-lg-3">
<ul>
<li><button id="editingST">&#9998;</button></li>
<li><button class="towork">🛠</button></li>
</ul>
</td>
</tr>

And JS:

$("#position-order tbody").on('click', '.towork', function gotowork(){
 $.ajax({
type: "POST",
url: '/towork.php',
data: {recid: $('#recid').text()}
});
return false;
});

recid is defined, but for all rows it takes the value from the first row

I think there is an error here – $("#position-order tbody")

>Solution :

You can get the row containing the button, then query for that specific td.

function gotowork(e) {
    const recid = $(e.target).closest('tr').find('#recid').text();
    // make request...
}

However, ids should be unique in a document, so you should use a class for this instead.

<td class="recid d-none">text...</td>

$(e.target).closest('tr').find('.recid').text()