Detecting for changes on table cells and sending to the backend

Hello,

I am fetching data from the backend and displaying it in the frontend (HTML + CSS, not anything fancy).

I output the table data inside input elements (each td), so if a user wants to change the cell's value he will edit the value inside the cell, then press the save button at the bottom.

But I need a good way to be able to detect what cells were changes before I send it to the backend to update the DB.

This is what I was thinking about, tell me if it's OK and if you think there's a better way:

Initially I will output the id of the row from the DB in a data-attribute, so I will have the id to update, and I will add a listener on every input element of the table, maybe using jQuery, something like:

$('#myTable input').on('change'......

Then, I will build an object with JavaScript that will use the row id as the key, and an array of the changed cells, so I will end up with sort of this object:

["1"] => [column1_new_value, column6_new_value]
["20"] => [column8_new_value, column9_new_value, column3_new_value]
["44"] => [column4_new_value, column5_new_value, column6_new_value]

then will send this object as JSON to the backend and update the the DB.

Is it a good idea? Anything I'm missing or a better solution?

Ty!