jexcel clearing and updating new data

I have a simple dropdown on my UI and if the user change that component the jexcel table should also change it's data. I am expecting to clear the table and get the changed values, but what happened on my case it just generating new instance of table rather than clearing the existing data.

Here is my sample code:

<select class="custom-select form-control" id="tempSel" onchange="templateChange()"></select>
<div id="spreadsheet" style="margin-left:10px; margin-top:10px"></div>

JS:

function displayOutput(data, headers, width) {      

        table = jexcel(document.getElementById('spreadsheet'), {
            data: data,
            colHeaders: headers,
            colWidths: width,
            allowInsertColumn: false,
            csvHeaders: true,
            tableOverflow: true,
            tableHeight: '650px',
        });               
    }

    function templateChange() {

        template = $("#tempSel").val();
        if (template == 0) {            
            $.get("/Db/getData1", { 'table': 0 })
                .done(function (res) {                    
                    data = res.data;
                    console.log(data);
                    displayOutput(data, ['NAME', 'AGE', 'GENDER'], [200, 200, 200]);
                });

        } else if (template == 1) {
            $.get("/Db/getData2", { 'table': 1 })
                .done(function (res) {                    
                    data = res.data;
                    console.log(data);
                    displayOutput(data, ['TYPE', 'SIZE', 'JOB'], [220, 220, 220]);
                });
        }
    }

Found the solution on this link https://github.com/paulhodel/jexcel/issues/498

just need to clear the table first before appending new one:

document.getElementById('spreadsheet').innerHTML = '';