JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/responsive/1.0.1/js/dataTables.responsive.min.js"></script>
<table id="example" class="display nowrap" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th></th>
            <th>Item 1</th>
            <th>Item 2</th>
            <th>Item 3</th>
            <th>Item 4</th>
        </tr>
    </thead>
    <tbody>
        <tr data-child-value="hidden 1">
            <td class="details-control"></td>
            <td>data 1a</td>
            <td>data 1b</td>
            <td>data 1c</td>
            <td>data 1d</td>
        </tr>
        <tr data-child-value="hidden 2">
            <td class="details-control"></td>
            <td>data 2a</td>
            <td>data 2b</td>
            <td>data 2c</td>
            <td>data 2d</td>
        </tr>
    </tbody>
</table>

CSS

@import url('//cdn.datatables.net/1.10.2/css/jquery.dataTables.css');
 td.details-control {
    background: url('http://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('http://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}

JavaScript

function format1 ( name, value ) {
    return '<div>' + name + ': '+ value + '</div>';
}

function format ( name, value ) {
    return '<div><table id="example1" cellspacing="0" width="90%"><thead><tr><th></th><th>CI 1</th><th>CI 2</th><th>CI 3</th><th>Item 4</th></tr></thead><tbody><tr data-child-value="hidden 1"><td class="details-control"></td><td>CD 1a</td><td>CD 1b</td><td>CD 1c</td><td>CD 1d</td></tr><tr data-child-value="hidden 2"><td class="details-control"></td><td>CD 2a</td><td>CD 2b</td><td>CD 2c</td><td>CD 2d</td></tr></tbody></table></div>';
}
  $(document).ready(function () {
      var table = $('#example').DataTable({});

      // Add event listener for opening and closing details
      $('#example').on('click', 'td.details-control', function () {
          var tr = $(this).closest('tr');
          var row = table.row(tr);

          if (row.child.isShown()) {
              // This row is already open - close it
              row.child.hide();
              tr.removeClass('shown');
          } else {
              // Open this row
              row.child(format(tr.data('child-value'))).show();
              tr.addClass('shown');
          }
       var table1 = $('#example1').DataTable({});
        alert("check1");
      // Add event listener for opening and closing details
      $('#example1').on('click', 'td.details-control', function (e) {
          alert("check2");
          var tr1 = $(this).closest('tr');
          var row1 = table1.row(tr1);

          if (row1.child.isShown()) {
              // This row is already open - close it
              row1.child.hide();
              tr1.removeClass('shown');
          } else {
              // Open this row
              alert("show second table");
              row1.child(format1("foo", "bar")).show();
              tr1.addClass('shown');
          }
          
          e.preventDefault();
          return false;
      });
      });
      
  });