Как динамически изменять таблицы данных без функциональности редактора?

Question

Мне нужна помощь, я пытаюсь решить эту проблему навсегда и не могу понять это. У меня есть веб-страница, на которой две таблицы расположены рядом друг с другом, в каждой строке таблицы есть три раздела: сначала имя сотрудника, затем его зарплата, а в последнем разделе кнопка. Нажав кнопку, вы удаляете строку сотрудника из его текущей таблицы, и она перемещается в другую, имитируя перемещение их между отделами. У меня все это работало хорошо, но затем я попытался внедрить систему, в которой вы можете сортировать каждую таблицу по алфавиту или по зарплате. Я сделал это с помощью плагина datatables. Это сработало, но всякий раз, когда я сортирую по одному из них, он сбрасывает таблицу, а это означает, что все перемещенные строки все еще находятся в новой таблице, но теперь в оригинале есть дубликаты.

Я рассчитывал произошло то, что таблица данных создается при загрузке страницы и при сортировке таблицы данных добавляется обратно во все исходные строки. Я понимаю, что, возможно, я мог бы решить проблему, имея такую ​​возможность, чтобы каждый раз, когда я нажимал на функцию сортировки, я использовал JavaScript, чтобы перепроверить таблицу и удалить добавленные строки, но это решение кажется слишком хакерским, и должно быть более элегантное решение, так как это может замедлиться при большем количестве строк.

Если кто-нибудь может мне помочь, я был бы очень благодарен. Мой код ниже.

JS:

$(document).ready(function() {
    $('#righttable').DataTable( {
        "bFilter": false
    } );
} );

$('table').on('click', 'button', function() {
    if ($(this).closest('tbody').attr('id')=='Left') {
      let name = $(this).closest("tr").find("td:first").text();
      let index = selected_team.indexOf(name);
      console.log(name, index);
      selected_team.splice(index, 1);
      $(this).closest("tr").remove();
      $('#righttable').append('<tr><td><a class="article-title" href="#" data-toggle="modal" data-target="#myModal">'+name+'</a></td>'+'<td>'+stats[name][0]+'</td><td><button class="btn btn-success">+</button></td></tr>');
    }
    if ($(this).closest('tbody').attr('id')=='Right') {
      let name = $(this).closest("tr").find("td:first").text();
      $(this).closest("tr").remove();
      $('#lefttable').append('<tr><td><a class="article-title" href="#" data-toggle="modal" data-target="#myModal">'+name+'</a></td>'+'<td>'+stats[name][0]+'</td><td><button class="btn btn-danger">-</button></td></tr>');
      selected_team.push(name);
    }
});

HTML (сокращенно):

<table class="table table-bordered table-striped" id='lefttable'>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Price</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody id="Left">
                    {%for player in players%}
                        {%if player in team%}
                            <tr>
                                <td><a class="article-title" href="#" data-toggle="modal" data-target="#myModal">{{player}}</a></td>
                                <td>{{hstats[player][0]}}</td>
                                <td>
                                <button class="btn btn-danger">-</button>
                                </td>
                            </tr>
                        {%endif%}
                    {%endfor%}


                </tbody>
            </table>
        </div>

        <div class="col-sm-2"></div>

        <div class='col-sm-5 table-wrapper-scroll-y my-custom-scrollbar'>
            <table class="table table-bordered table-striped" id='righttable'>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Price</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody id="Right">
                     {%for player in players%}
                        {%if player not in team%}
                            <tr>
                                <td><a class="article-title" href="#" data-toggle="modal" data-target="#myModal">{{player}}</a></td>
                                <td>{{hstats[player][0]}}</td>
                                <td>
                                <button class="btn btn-success">+</button>
                                </td>
                            </tr>
                        {%endif%}
                    {%endfor%}
                </tbody>
            </table>