handsontable destroy and create

Question

I want to destroy and recreate my excel sheet i'm using Handsontable for it the object is getting destroyed and created new but the data inside the row is same for new table as well for old one

since the title is similar to SO QUESTION i've implemented what was the answer in previous SO question but i'm still stuck
JSFIDDLE

     <div id="example1" class="hot handsontable"></div>
    <select class="client_class">
    <option value="">Select client</option>
    <option value="DEFGH">DEFGH</option>
    </select>


    var autosaveNotification;
    var hotInstance;
    var setting1 = {
    data: [],
    colHeaders: ['InvoiceNo', 'InvoiceDate', 'Supplier'],
    columns: [{
        data: 'InvoiceNo'
    }, {
        data: 'InvoiceDate'
    }, {
        data: 'Supplier'
    }],
    rowHeaders: true,
    minSpareRows: 1,
    minRows: 5,
    manualColumnResize: true,
    manualRowResize: true,
    fixedColumnsLeft: 1,
    manualColumnMove: true,
    manualRowMove: true,
    };
     hotInstance = new Handsontable(jQuery("#example1")[0], setting1);

   jQuery('.client_class').on('change', function () {
    var selected = $(this).find("option:selected").val();
    console.log(hotInstance.getData());
    hotInstance.destroy();
    hotInstance = new Handsontable(jQuery("#example1")[0], setting1);
    console.log(hotInstance.getData());
   });

Answer 1

I assume your question is that you're trying to create a new table with empty data but yours isn't doing that. The simple solution is that on the second to last line you're setting the new HOT instance to have setting1 as the new options object, forgetting that Objects in JS can be mutated, meaning that setting1.data is being mutated regardless of the table.

To achieve what I think is your intended behavior, reset setting1.data before creating a new hot instance:

jQuery('.client_class').on('change', function () {
    var selected = $(this).find("option:selected").val();
    console.log(hotInstance.getData());
    hotInstance.destroy();
    setting1.data = []; // this is the new line
    hotInstance = new Handsontable(jQuery("#example1")[0], setting1);
    console.log(hotInstance.getData());
});

As you can see, this will ensure you are resetting just the data object. This issue occurs because HOT intentionally mutates the data object as you edit the table. If you wanted to, for example, save the data object for each of your two client modes, then I suggest you add logic which stores each data object and retrieves it right before creating the new HOT instance. Something like this:

setting1.data = storedDataObjects["client1"]; // if adding "client1"