JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<input class="username" placeholder="Username" type="text">
<input class="phone" placeholder="Phone" type="text">
<button id="add">Add</button>

<br>
<br>
<br>
<br>


<table class="table table-striped table-bordered table-hover" id="employersTable">
  <thead>
    <tr>
      <th style="width: 10%;">Username</th>
      <th style="width: 5%;">Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alex</td>
      <td>1970001</td>
    </tr>
  </tbody>
</table>

<br>
<br>
<br>
<br>

<p id="result"></p>

JavaScript

var employersTable = $('#employersTable').DataTable();

$('#add').click(function() {
  addRow($('.username').val(), $('.phone').val());
});

$('body').on('click', '#employersTable tr', retrieveRow(this));

function addRow(username, phone) {
  employersTable.row.add([
    '<td>' + username + '</td>',
    '<td>' + phone + '</td>',
  ]).draw();
}

function retrieveRow(e) {
  alert('fire')
  tr = e.target;

  row = employersTable.row(tr);

  detail_data = row.data();
  $("#result").empty().html(detail_data[0] + " " + detail_data[1])
}