JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/dataTables.bootstrap.min.js"></script>
<table id="Table" class="table table-striped table-bordered dt-responsive nowrap" style="width: 100%;">
  <thead>
    <tr>
      <th>No</th>
      <th>Id</th>
      <th>Data</th>
      <th>Click</th>
    </tr>
  </thead>
</table>

JavaScript

var object = {
            "Data": "A",
            "Id": "1"
          };
          var objectB = {
            "Data": "B",
            "Id": "2"
          };
          var dataSet = [];
          dataSet.push(object);
          dataSet.push(objectB);

          console.log(dataSet);

          var table = $('#Table').DataTable({
            data: dataSet,
            lengthMenu: [5, 10, 15, 20, 25],
            columns: [{
              'data': null,
            }, {
              'data': 'Id',
            }, {
              'data': 'Data',
            }, {
              'data': null,
            }],
            "oLanguage": {
              "sEmptyTable": "Error: Empty Table. Please create a new question"
            },
            "fnRowCallback": function(nRow, aData, iDisplayIndex) {
              $("td:first", nRow).html(iDisplayIndex + 1);
              return nRow;
            },
            'columnDefs': [{
              'targets': [0],
              'searchable': true,
              'orderable': false
            }, {
              "targets": [1],
              "visible": false,
              "searchable": false
            }, {
              'targets': [-1],
              'searchable': false,
              'orderable': false,
              'render': function(data, type, full, meta) {
                return '<button type="button" class="btn btn-warning Button">Get ID</button>';
              }
            }],
            bProcessing: true,
            bStateSave: false,
            bPaginate: true,
          })

          var rowCount = $('#QuizTb').on('order.dt search.dt', function() {
            table.column(0, {
              search: 'applied'
            }).nodes().each(function(cell, i) {
              cell.innerHTML = i + 1;
            });
          });

          $('#Table').on('click', '.Button', function() {
            var tr = $(this).closest("tr");
            var rowindex = tr.index();
            //Get row based on index
            var...