Best way to update a css class after .sortable function?

Question

I've seen the answers around but I can't get the way to work this out. I got 1 <table> with 4 <tbody>. Each <tbody> is a different set of data and each has its own class. Which basically just shows a colored dot inside a <td>. After sorting this <td> i want the newly placed <td> inside the <tbody> to update to the <tbody> class.

Code for table

<div id="tablePlanR" class="myDiv">
    <table id="topTable" class="tableGeneral table-newS">
        <thead>
            <tr>
            <th id="h1">#</th>
            <th id="h1">  </th>
            <th id="h1">CEDIS</th>
            <th id="h1"># de Sucursal</th>
            <th id="h1">Sucursal</th>
            <th id="h1">Piezas</th>
            <th id="h1">Motos</th>
            <th id="h1">Encargado</th>
            <th id="h1">Selecciona una opcion</th>
            </tr>
        </thead>
        <tbody id="topBody" class="connectedSortable">
        <!-- Llenado de tabla desde JS-->
        </tbody>
        <tbody id="volumenBody" class="connectedSortable">
        <!-- Llenado de tabla desde JS-->
        </tbody>
        <tbody id="peticionBody" class="connectedSortable">
          <!-- Llenado de tabla desde JS-->
        </tbody>
        <tbody id="peticionBody" class="connectedSortable">
        <!-- Llenado de tabla desde JS-->
        </tbody>
        <tbody id="restoBody" class="connectedSortable">
        <!-- Llenado de tabla desde JS-->
        </tbody>
    </table>
</div>

This is the .sortable code (as far it works best for me but without the update on classes)

$(function(){
    var $tabs=$('#tablePlanR');
        $("tbody.connectedSortable")
            .sortable({
                connectWith: ".connectedSortable",
                items: "tr:not(:first)",
                appendTo: $tabs,
                helper:"clone",
                zIndex: 999990,
                cancel: ".notSortable",

        update: function(e, ui) {
            $("tr td:nth-child(1)").text(function() {
              return $(this).parent().index("tr");
    });
  }
            })
            .disableSelection();
    
    var $tab_items = $(".nav-tabs > li", $tabs).droppable({
      accept: ".connectedSortable tr",
      hoverClass: "ui-state-hover",
      
        drop: function(event, ui) {
        return false;
        }
    });
});

And here's how I fill the table:

$.get('some/uri', 
    function(data){

        $('#topBody').append('<tr><th class="dimBGreen notSortable">Tiendas Top</th></tr>');
        $('#volumenBody').append('<tr><th class="dimBYellow notSortable">Volumen</th></tr>');
        $('#peticionBody').append('<tr><th class="dimBRed notSortable">Peticiones</th></tr>');
        $('#restoBody').append('<tr><th class="dimBGray notSortable">Resto de Tiendas</th></tr>');

        for(let i=0; i<data.resultado.length;i++){
            if (i<10) {
                $('#topBody').append(
                '<tr>'+ 
                '<td class="indexCol">'+(i+1)+'</td>'+
                '<td><span class="dotGreen"></span></td>'+
                '<td>'+data.resultado[i].fccedis+'</td>'+
                '<td>'+data.resultado[i].fisucursal+'</td>'+
                '<td>'+data.resultado[i].fcnombretda+'</td>'+
                '<td>'+data.resultado[i].fipiezas+'</td>'+
                '<td>'+data.resultado[i].fimotos+'</td>'+
                '<td>'+data.resultado[i].fcencargado+'</td>'+
                '<td>'+'<div class="dropdown">'+
                '<button class="dropbtn">Opciones</button>'+
                '<div class="dropdown-content">'+
                '<a href="#" onclick="agregarR()">Resto\nde Tiendas</a>'+
                '<a href="#" onclick="agregarV()">Volumen</a>'+
                '<a href="#" onclick="agregarP()">Peticiones</a>'+
                '</div>'+
                '</div>'+'</td>'+
                '</tr>');   
            
            }           
            else if(i>=10 && i<12){
                $('#volumenBody').append(
                '<tr>'+ 
                '<td class="indexCol">'+(i+1)+'</td>'+
                '<td><span class="dotYellow"></td>'+
                '<td>'+data.resultado[i].fccedis+'</td>'+
                '<td>'+data.resultado[i].fisucursal+'</td>'+
                '<td>'+data.resultado[i].fcnombretda+'</td>'+
                '<td>'+data.resultado[i].fipiezas+'</td>'+
                '<td>'+data.resultado[i].fimotos+'</td>'+
                '<td>'+data.resultado[i].fcencargado+'</td>'+
                '<td>'+'<div class="dropdown">'+
                '<button class="dropbtn">Opciones</button>'+
                '<div class="dropdown-content">'+
                '<a href="#" onclick="agregarT()">Top 10</a>'+
                '<a href="#" onclick="agregarV()">Peticiones</a>'+
                '<a href="#" onclick="agregarP()">Resto\nde Tiendas</a>'+
                '</div>'+
                '</div>'+'</td>'+
                '</tr>');
            }

            else if(i>=12 && i<14){
                $('#peticionBody').append(
                '<tr>'+ 
                '<td class="indexCol">'+(i+1)+'</td>'+
                '<td><span class="dotRed"></td>'+
                '<td>'+data.resultado[i].fccedis+'</td>'+
                '<td>'+data.resultado[i].fisucursal+'</td>'+
                '<td>'+data.resultado[i].fcnombretda+'</td>'+
                '<td>'+data.resultado[i].fipiezas+'</td>'+
                '<td>'+data.resultado[i].fimotos+'</td>'+
                '<td>'+data.resultado[i].fcencargado+'</td>'+
                '<td>'+'<div class="dropdown">'+
                '<button class="dropbtn">Opciones</button>'+
                '<div class="dropdown-content">'+
                '<a href="#" onclick="agregarT()">Top 10</a>'+
                '<a href="#" onclick="agregarV()">Volumen</a>'+
                '<a href="#" onclick="agregarP()">Resto\nde Tiendas</a>'+
                '</div>'+
                '</div>'+'</td>'+
                '</tr>');
            }

            else{
                $('#restoBody').append(
                '<tr>'+ 
                '<td class="indexCol">'+(i+1)+'</td>'+
                '<td></td>'+
                '<td>'+data.resultado[i].fccedis+'</td>'+
                '<td>'+data.resultado[i].fisucursal+'</td>'+
                '<td>'+data.resultado[i].fcnombretda+'</td>'+
                '<td>'+data.resultado[i].fipiezas+'</td>'+
                '<td>'+data.resultado[i].fimotos+'</td>'+
                '<td>'+data.resultado[i].fcencargado+'</td>'+
                '<td>'+'<div class="dropdown">'+
                '<button class="dropbtn">Opciones</button>'+
                '<div class="dropdown-content">'+
                '<a href="#" onclick="agregarT()">Top 10</a>'+
                '<a href="#" onclick="agregarV()">Volumen</a>'+
                '<a href="#" onclick="agregarP()">Peticiones</a>'+
                '</div>'+
                '</div>'+'</td>'+
                '</tr>');
            }
        }
    });