How to link add and deleted data from Beck when clicking on a checkbox?

When clicking on a checkbox triggers the submit to the server the data is sent via ajax, in response to receiving the data and deduce them in a table like this:
data.playlist.forEach(function (song) {
 document.getElementsByClassName('all_files')[0].appendChild(document.createElement('tr')).innerHTML = '<td>' + song.name + '</td><td><button onclick="onButtonClick(' + song.name + ')" class="btn btn-sm btn-dark" id="' + song.name + '">Play</button></td>';
 });

If you remove the tick from the checkbox, the data will remain. If you put the same tick will come the data, and added again to the table. Actually a question how to make so that I put a check, the data came from, were added to the table, a tick was removed, the data is retired and a new one was added?
March 23rd 20 at 19:45
1 answer
March 23rd 20 at 19:47
Solution
The buck needs to come with some unique id that you need to remember on the client. If you come again the data with the same id, then ignore them to replace their existing data. If new id, then add.

In accordance with tick it is possible to put either an array of IDs, or a specific type of data (logically jackdaw usually means the category in the filter data). Accordingly, in this case, in addition to id with Beck should come also the data type. So it will be easy to remove data based on the type jackdaws.

Find more questions by tags JavaScript