I have a table with payment info, and I want ability to modify contents of rows by having a "modify" button on each row. Clicking on modify, goes to a form, where user can submit content, with a paymentId associated to that row. So I need paymentId to be passed when "modify" button is clicked.

the html for this is:

//payment.entry_id is passed to the ejs template from the node server.

$('.modifyButton').on('click', e => {
  console.log("data attribute passed: ", e.target.getAttribute('data-paymentId'));
});

<button class="btn btn-warning modifyButton" data-paymentId=< %=payment.entry_id%> type="button">
  <i class="fas fa-edit"></i>
</button>

I sometimes log the correct paymentId, but sometimes it returns as null. What is the reason for this behaviour?