javascript jquery datatable alpaca

Question

I tried to look around the internet, but didn't come across with similar issue.

I have a page which uses alpaca to create a form which has some random alpaca fields as well as a table that the user can fill.

The page also includes another table that is created with DataTable directly, which shows the answers what user has previously filled in. These are seperated by a tab system so that they are not shown both at the same time.

The issue lies in DataTables search function. If you have initialized a table with alpaca (which uses datatables under the hood also), the search method stop functioning properly, resulting 0 results at all times. Destroying the alpaca table does not affect in any way either.

Here I have four simple functions for initializing the tables and destroying them. Initializing, destroying and reinitializing the datatable has no affect on it's search functionality, but once alpaca table is created, the search functionality stops:

let initAlpaca = function () {
    $('#table-alpaca').alpaca(alpacaJson);
};

let destroyAlpaca = function () {
    $('#table-alpaca').alpaca("destroy");
};

let initDataTables = function () {
  if (dataTable == null){
    // datatable.destroy(true) destroys table element.
    $("#div2").append('<table id="table-data" class="table table-bordered table-hover table-striped">');
    dataTable = $('#table-data').DataTable({
        bPaginate: false,
        searchable: true,
        search: {
          smart: false
        },
        columns: [
          {name:"Fname", title:"Fname"},
          {name:"Lname", title:"Lname"},
          {name:"Age", title:"Age"},
          {name:"Check", title:"Check"},
        ],
        data: [
          ["John", "Smith", "44", "2000"],
          ["Mary", "Doe", "54", "2400"],
          ["Markus", "Example", "30", "3000"]
        ]
    });
  }
};

let destroyDataTables = function () {
    if (dataTable != null){
    dataTable.destroy(true);
    dataTable = null;
  }
};

Here is a JSFiddle that can demonstrate the issue: JSFiddle

Could this only be an issue under the alpaca("destroy") method? How could I properly delete possible alpaca datatable instance properly so I can have the other datatable's search functionality work properly?

Unlike in the JSFiddle, there is no need to show these tables at the same time.