JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/kt-2.5.0/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/kt-2.5.0/datatables.min.css">
<table id="example" class="display" style="width:100%">
  <table id="example2" class="display" style="width:100%">
    <button id='button'>
Destroy second table
</button>

JavaScript

var dataSet = [
  ["Tiger ", "Edinburgh"]
];

var dataSet2 = [
  ["aaaa ", "bbbbb"]
];

$(document).ready(function() {
  table = $('#example').DataTable({
    data: dataSet,
    columns: [{
      title: "Name"
    }, {
      title: "Position"
    }],
    keys: true
  });

  table.on('key', function(e, datatable, key, cell, originalEvent) {
    if (key === 13) { // return
      alert("table 1");
    }
  });

  table2 = $('#example2').DataTable({
    data: dataSet2,
    columns: [{
      title: "aaaa"
    }, {
      title: "bbbb"
    }],
    keys: true
  });

  table2.on('key', function(e, datatable, key, cell, originalEvent) {
    if (key === 13) { // return
      alert("table 2");
    }
  });

  $('#button').click(function(e, dt, button, conf) {
    var t = $('#example2').DataTable();
    t.destroy();
  });

});