JSFiddle - React, Tailwind, and code Playground

HTML

<script src="rowReorder"></script>
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/rowreorder/1.2.3/js/dataTables.rowReorder.min.js"></script>
<script src="//cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<body>

<select id='dataList'>
<option value=0>Select list</option>
<option value=1>list 1</option>
<option value=2>list 2</option>
</select>

<table class="table table-striped m-b-20 table-modal table-vertical-align" id="tableData" style="width:100%";>
                                <thead class="bg-grey-transparent-4">
                                <tr>
                                    <th class="text-black text-center"><span class="m-l-15">#</span></th>                                       <th class="text-black text-center">Name</th>
                                    <th class="text-black text-center">SurName</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                                </table>   
</body>

JavaScript

var list1 = [
	{id: 1,
  name: 'John',
  surname: 'Doe'},
  	{id: 2,
  name: 'Tom',
  surname: 'Black'},
  	{id: 3,
  name: 'Mary',
  surname: 'Poppins'}
];

var list2 = [
	{id: 11,
  name: 'Sam',
  surname: 'Smith'},
  	{id: 12,
  name: 'Bud',
  surname: 'Slim'}
];

$(document).ready(function () {
$('body').on('keyup change', '#dataList', function () {
        let idSc = $(this).val();
         if (idSc !== '0') {
         		if(idSc == 1) {
            listDataToShow = list1;
            } else {
             listDataToShow = list2;
            }
         
         
            loadTable(idSc,listDataToShow);
        }
        });
});

function loadTable(idSc,listDataToShow) {
 let tab = '#tableData';
    if ( $.fn.DataTable.isDataTable(tab) ) {
        $(tab).DataTable().clear().destroy();
    }
    

    $(tab+ ' tbody').empty();
        $.each(listDataToShow, function (id, cmd) {
        addRowTable(cmd,tab);
    });
    
     InitTableModal(tab);
    
    let table = $(tab).DataTable();
    table.on( 'row-reorder', function ( e, diff, edit ) {
        for ( var i=0, ien=diff.length ; i<ien ; i++ ) {
            //console.log(table.row( diff[i].node ).data());
            var rowData = table.row( diff[i].node ).data();
            alert(rowData);
        }
    });
    
}

function addRowTable(cmd, idTable) {

    let contenutoRiga = '<td class="text-center orderCol">'+cmd.id+'</td>' +
        '<td>'+cmd.name+'</td>' +
        '<td class="text-center">'+cmd.surname+'</td>';

    $(idTable).append('<tr>'+contenutoRiga+'</tr>');
}

function InitTableModal(idTable) {

    //$(idTable).DataTable().destroy();

    if ( $.fn.DataTable.isDataTable(idTable) )
        $(idTable).DataTable().clear().destroy();

    $(idTable).DataTable({
        "bPaginate": false,
        "bLengthChange": false,
        "bFilter": false,
        "bInfo": false,
        //"bSort" : false,
        responsive: true,
        rowReorder: {
            selector: 'td.orderCol',
           ...