JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.12.1/b-2.2.3/sl-1.4.0/datatables.min.css">
<script src="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.12.1/b-2.2.3/sl-1.4.0/datatables.min.js"></script>
<table class="table" id="the-table">
  <thead>
    <tr>
      <th>Title</th>
    </tr>
  </thead>
  <tbody>
      <tr>
        <td>Content</td>
      </tr>
  </tbody>
</table>

<hr>

<button class="btn btn-warning" id="the-button">Destroy DataTable</button>

JavaScript

var dataTable = $('#the-table').DataTable({
  dom: 'Bt',
  buttons: [
    {
      text: 'The Button',
      action: function () { console.log('Button clicked'); },
      init: function (dt, $button, config) {
        $button.attr('id', 'dt-button');
      },
    },
  ],
  select: true,
});

dataTable.on('select deselect', function (e, dt, type, indexes) {
  console.log(`"${e.type}" triggered!`);
  
  let $button = $('#dt-button');
  
  // Update button's toolip via "bootstrap.Tooltip.getInstance($button.parent().get(0)).setContent(...);"
  
  if ($button.length === 0) {
    console.error('The button cannot be updated since it\'s gone!')
  }
});

$('#the-button').on('click', function () {
	console.log('Destroying dataTable...')
	dataTable.destroy();
  console.log('Destroyed dataTable!')
});