JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
Load "data 1" or "data 2" after run and everything works. <br>
But hit one button after another and it runs into a bug.

<table id="data-table">
    <thead></thead>
    <tbody></tbody>
</table>
<br>
<br>
<br>
<button id="reload1">load data 1</button>
<button id="reload2">load data 2</button>

JavaScript

var fillTable = function (data) {
    console.log(data);

    var columns = [];
    $.each(data[0], function (key, value) {
        columns.push({
            "data": key,
                "title": key
        });
    });

    var $table = $('#data-table');
    
    if ( $.fn.dataTable.isDataTable( $table ) ) {
      $table.DataTable().destroy();
      $table.empty();
    }

    $table.DataTable({
        "pageLength": 2,
            "lengthChange": false,
            "processing": true,
            "data": data,
            "columns": columns
    });
};

$("#reload1").click(function (e) {

    var data = [{
        col1: 888,
        col2: 999,
        col3: 999
    }, {
        col1: 777,
        col2: 999,
        col3: 999
    }, {
        col1: 666,
        col2: 999,
        col3: 999
    }, {
        col1: 555,
        col2: 999,
        col3: 999
    }, {
        col1: 444,
        col2: 999,
        col3: 999
    }];

    fillTable(data);
});

$("#reload2").click(function (e) {

    var data = [{
        col1: 123,
        col2: 456
    }, {
        col1: 123,
        col2: 456
    }, {
        col1: 123,
        col2: 456
    }, {
        col1: 123,
        col2: 456
    }];

    fillTable(data);
});