JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdn.datatables.net/tabletools/2.2.0/js/dataTables.tableTools.js"></script>
<div id="vehicletabs" style="background:#f5f3e5;position:absolute;left:10px;width:400px;">
    <ul style="border:1.5px solid #98bf21">
    <li><a href="#tabs-1">Extens</a></li>
      </ul><br><br>
      <table id="vehicletable" class="display" cellspacing="0" width="100%">
          <thead>
            <tr>
                <th>Vehicle #</th>
                <th>Driver Name</th>
                <th>Driver Phone#</th>
            </tr>
        </thead>

   <tr><td>01002</td><td>Rahnama</td><td>202-xxx-xxxx</td></tr>
   <tr><td>01004</td><td>Shaaban</td><td>202-xxx-xxxx</td></tr>
   <tr><td>01005</td><td>Boateng</td><td>240-xxx-xxxx</td></tr>
   <tr><td>01149</td><td>Yanga</td><td>301-xxx-xxxx</td></tr>
   <tr><td>01150</td><td>Ouardi</td><td>240-xxx-xxxx</td></tr>
   <tr><td>09000</td><td>Test</td><td>123-xxx-xxxx</td></tr>
   <tr><td>08000</td><td>Test</td><td>628-xxx-xxxx</td></tr>
      </table>
      <input type="button" id="togroupptt" value=">>">
      </div>
      
      <div id="groupptttabs" style="background:#f5f3e5;position:absolute;left:450px;width:500px;">
    <ul style="border:1.5px solid #98bf21">
    <li><a href="#tabs-1"><?php echo" Group PTT";?></a></li>
      </ul><br><br>
        <table id="groupptttable" class="display" cellspacing="0" width="100%">
          <thead>
            <tr>
                <th>Vehicle #</th>
               ...

CSS

#togroupptt{
    background-color: #98BF21;
    position:inherit;
    top:440px;
    margin-left:290px;
    padding: 1px 30px 1px 30px;
    border: none;
    border-radius: 2px;
    border: 2px solid #98bf21;
}
#togroupptt:hover{
   background-color: #787878;
    color: white;
}

#addpttgroup{
    background-color: #98BF21;
    position:inherit;
    top:490px;
    margin-left:222px;
    padding: 1px 5px 1px 5px;
    border: none;
    border-radius: 2px;
    border: 2px solid #98bf21;
}
#addpttgroup:hover{
   background-color: #787878;
    color: white;
}
#tovehicleexts{
    background-color: #98BF21;
    position:inherit;
    top:490px;
    margin-left:400px;
    padding: 1px 30px 1px 30px;
    border: none;
    border-radius: 2px;
    border: 2px solid #98bf21;
}
#tovehicleexts:hover{
   background-color: #787878;
    color: white;
}

JavaScript

$( "#vehicletabs" ).tabs();
$( "#groupptttabs" ).tabs();
$( "#groupnamediv" ).hide();
var vehicletable = $('#vehicletable').DataTable( {
        dom: 'Tlftpi',
        tableTools: {
            "sRowSelect": "os",
            "aButtons": [ "select_all", "select_none" ]
        },
                            "scrollY":"210px",
                       "scrollX": true,
                  "pageLength": 15,
                 "lengthMenu": [[15, 25, 50, -1], [15, 25, 50, "All"]],
    } );
     $('#vehicletable tbody').on( 'click', 'td', function () {
        $(this).toggleClass('selected');
    } );

    var groupptttable = $("#groupptttable").DataTable({
                        dom: 'Tlftpi',
                        tableTools: {
            "sRowSelect": "os",
            "aButtons": [ "select_all", "select_none" ]
        },
                       "scrollY":"300px",
                       "scrollX": true,
                       "pageLength": 15,
                 "lengthMenu": [[15, 25, 50, -1], [15, 25, 50, "All"]],

      });

    $('#groupptttable tbody').on( 'click', 'td', function () {
        $(this).toggleClass('selected');
    } );

    vehicletable.on( 'dblclick', 'tbody tr', function () {
       var $row = $(this);
       var addRow = vehicletable.row($row);
    groupptttable.row.add(addRow.data()).draw();
    addRow.remove().draw();
    } );

    groupptttable.on( 'dblclick', 'tbody tr', function () {
       var $row = $(this);
       var addRow = groupptttable.row($row);
    vehicletable.row.add(addRow.data()).draw();
    addRow.remove().draw();
    } );

    $('#togroupptt').on( 'click', function (){
        moveRows(vehicletable, groupptttable);
    });

    $('#tovehicleexts').on( 'click', function (){
        moveRows(groupptttable, vehicletable);
    });

    function moveRows(fromTable, toTable){
  var $getrow= fromTable.rows(".selected");
  $.each($getrow, function(k, v){
    if($getrow != null){
    toTable.rows.add($getrow.data()).draw();
   ...