How to form an array of only those fields that have changed in order to send them later?

Question

JavaScript

Hello. In the admin there is a table with a list of records from the database. All entries have some fields that can be edited. I need the user to be able to change the fields and save the changes. How to collect an array to send it to the server? That is, I need to collect an array in which there will be only those fields that have been edited.
The table looks something like this:
https://jsfiddle.net/pos2yb0j/1/

But I need to get such an array if 1 entry has info changed to 123, and the second entry has its status changed to value 3:

[
   {id: a1, info: '123', status: 'value 2'},
   {id: a2, status: 'value 3'},
]

The point I'm going to run into is that it keeps track of all changes, even if it says "Milk" and I add "1" and then erase "1", this input will still save that edit and write it to the array. To avoid this, I will need to store the contents of all fields in memory and compare them before sending. In short - let it be better overwritten , because there can really be a lot of fields and you don’t really want to store all this in memory.
item.addEventListener('input', function() {.

Answer 1

We remember the initial state of the fields
Before sending, we take the current state
We calculate the diff between objects

Answer 2

I need the user to be able to change the fields and save the changes. How to collect an array to send it to the server?

The form? If just religion/architecture does not allow sending from the form - in js - formData(form) and send it with ajax.

Answer 3

In my opinion, you need to remember the initial state (when the page loads), then when submitting the form, go through all the lines of the table and check if the value matches the original one. If not, add acc. writing to an array.
Something like this:

var initialState = serialize();

function serialize() {
    var data = [];
    var rows = myTable.rows;

    for (var i = 1; i < rows.length; i++) {
        var row = rows[i];
        var id = row.cells[0].textContent;
        var info = row.cells[2].firstChild.value;
        var status = row.cells[3].firstChild.value;
        data.push({
            id: id,
            info: info,
            status: status
        });
    }

    return data;
}

function onSubmit() {
    var data = [];
    var currentState = serialize();

    for (var i = 0; i < currentState.length; i++) {
        var entry = currentState[i];
        var oldEntry = initialState.find(e => e.id == entry.id);
        if (oldEntry.state != entry.state || oldEntry.info != entry.info) {
            data.push(entry);
        }
    }

    // отправить реквест с данными из data
}