JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.min.css">
<table id='test'>
	<thead>
		<tr>
			<th>User</th>
			<th>Number</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>john</td>
			<td data-order='50'>50</td>
		</tr>
		<tr>
			<td>Greg</td>
			<td data-order='40'>40</td>
		</tr>
		<tr>
			<td>Handy</td>
			<td data-order='30'>30</td>
		</tr>
		<tr>
			<td>Bill</td>
			<td data-order='5'>5</td>
		</tr>
		<tr>
			<td>Paris</td>
			<td data-order='80'>80</td>
		</tr>
		<tr>
			<td>Gildas</td>
			<td data-order='48'>48</td>
		</tr>
		<tr>
			<td>Karim</td>
			<td data-order='20'>20</td>
		</tr>
		<tr>
			<td>Annis</td>
			<td data-order='41'>41</td>
		</tr>
	</tbody>
</table>

JavaScript

$(document).ready(function(){
    var table = $('#test').DataTable({
        order: [1,'desc']
    });
   
    
    $("#test tbody").on("click","td",function(){
         var td = $(this);
         var d = parseInt(table.cell( this ).data());
         d = d+1;
         td.data("order",d);
         td.attr("data-order",d);
         table.cell(this).data(d).draw();
    })
    
});