javascript – Handle multiple buttons with different API IDs in a HTML table

Ok, so my scenario goes like this: I am building an API of financial transactions. Backend does not matter for this problem, the only thing is that the API has a route /users/:userid/transactions/:transactionid. On the frontend (PHP and pure JavaScript, no NodeJS BFF or anyhing like that, just plain old client side JS with axios library) I have a page with a HTML table showing all transactions. Each row of the table (each transaction) has two options: Approve or Cancel. I then created two buttons for each row with the corresponding actions. However I am having some trouble dealing with these buttons because the buttons should call the API using the corresponding transactionid.

I have defined all the <button>´s with the id of the HTML element being the ID of the transaction to be used when POSTing on the route mentioned above. The button onclick attribute is used to call the JS function that will execute the POST and the id of the HTML button is passed to the function to be used as the transactionid. Like this:

<button id="EG202090283" onclick="Transactions.cancel(this.id)">Cancel</button>

In this case, the POST request is sent to /users/:userid/transactions/EG202090283. Of course this is not secure because the user can simply change the button id and POST to another route. But I don’t know another alternative and I’m looking for best practices about this.

The question is: how to link these two buttons (Approve and Cancel) to the desired transaction only and how to that in such way that is difficult for the user to change the transaction ID? Is it using sessions, do I need a BFF pattern for this?