JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>

<table id="datatable" class="table" style="width:100%">
  <thead>
    <tr>
      <th>ID</th>
      <th>Connected IP</th>
      <th>Channel Name</th>
      <th>Uptime</th>
      <th>User Agent</th>
      <th>Actions</th>
    </tr>
  </thead>
 
  <tbody class="clientsData">
 
  </tbody>
</table>

JavaScript

$.ajax({
  type: 'GET',
  url: 'https://api.myjson.com/bins/ybeia',
  data: {
    'cmd': '',
    'p0': ''
  },
  dataType: 'json',
  success: function(data) {
    // console.log(data);
    $('#tm').text(data.header.tm);
    $('#net').text(data.header.net);
    $('#mem').text(data.header.mem);
    $('#cpu').text(data.header.cpu);
 
    var clientsData = data.clients;
    // console.log(clientsData);
 
    var result = "";
    for (var i = 0; i < clientsData.length; i++) {
      var row = clientsData[i];
 
      result += "<tr id='data" + row.id + "' class='data' data-info='info" + row.id + "'>";
      result += "<td id='id" + row.id + "'>" + row.id + "</td>";
      result += "<td id='ip" + row.id + "'>" + row.ip + "</td>";
      result += "<td id='cn" + row.id + "'>" + row.cn + "</td>";
      result += "<td id='ut" + row.id + "'>" + row.ut + "</td>";
      result += "<td id='ua" + row.id + "'>" + row.ua + "</td>";
      result += "<td id='del" + row.id + "' style='text-align: center; width: 30px'><a class='del' href='cmd=clDel&p0=" + row.id + "' title='Kick'><button><i style='color: #FF0000;' class='fa fa-trash' aria-hidden='true'></i></button></a></td>";
      result += "</tr>";
 
    }
 
 
    $('tbody.clientsData').html(result);
 
    $('#datatable').DataTable({
      "bPaginate": false,
      "bLengthChange": true,
      "bFilter": false,
      "bInfo": true,
      "bAutoWidth": true,
      "language": {
        search: "_INPUT_",
        searchPlaceholder: "Search..."
      },
      "dom": '<"pull-left"f><"pull-right"l>tip'
 
    });
 
    $('div.dataTables_filter input').css('width', 300);
    $('div.dataTables_filter input').css('margin-left', -1);
 
 
  },
  complete: function(data) {
    setTimeout(doAjax, interval);
  }
});
 
 
var interval = 1000;
 
function doAjax() {
  $.ajax({
    type: 'GET',
    url: 'https://api.myjson.com/bins/1accxe',
    data: {
      'cmd': '',
      'p0': ''
    },
    dataType: 'json',
    success: function(data) {
      //...