How to update tablesorter onclick in dynamic table?

Question

I'm trying to use tablesorter on a dynamic HTML table. When the data in the table changes, and I try to sort, the table messes up; it adds the previous data and the current data and combines them both into one table, and it is also sorting other tables!! How can I make it so when the table changes, tablesorter will update? I'm populating the table from a .csv using jQuery, and the table is dynamic, because the HTML page the table is in has multiple file names, if you click on one, the data from that file will be loaded to that table

I'm using multiple tables, and one tablesorter, but here's one of my tables:

<div id="origtable">
    <table border="1" id="table_side">
        <thead>
            <tr>
              <th>Origin <br> Country</th>

              <th>Count</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>    
</div>

Here's my tablesorter:

/* tried this at first because I'm waiting for data from .csv file to populate table
setInterval(function(){sortStuff()},1000);
    function sortStuff(){
        $("table").tablesorter({ 
        sortList: [[1,1]]
        });
        $("table").trigger("update");
    }
*/
$(document).ready(function(){
    $("table").tablesorter({ 
        sortList: [[0,1]]
        });
    });

    $("table").on( "click", function() {
    $("table").trigger("update");
});

EDIT 1: jquery function used to populate html table after reading from .csv (this jquery code is in a seperate .js file)

function populateTableCounts(rowkey, tablename, hashdata)
    {
        var rowhtml = "";
        $.each(hashdata, function (key, value) {
             key = key.replace(/-/g, ' / ');
             key = key.replace(/:/g, ' , ');

             var rowdata=countrow.replace('$row_key', key);
             rowdata=rowdata.replace('$row_val', value);

            //add row <tr> to var rowhtml   
            rowhtml += rowdata;          
        });

        //append populated rowhtml to TBODY
        $('#' + tablename + ' tbody').append(rowhtml);
    }

Answer 1

Ignore my comment is trigger("update") the function you need, but check if this code works

$(document).ready(function(){
     $("table").tablesorter({ 
           sortList: [[0,1]]
     });

     $("table").click(function(){ $("table").trigger("update"); });
});

EDIT

If you are using get to obtain csv data you need something like this:

$.get("your/csv/file.csv",function(csv){
   //... code that handle your csv and put into table
   //...

   //AT END UPDATE TABLE
   $("table").trigger("update");
});

EDIT2

function populateTableCounts(rowkey, tablename, hashdata)
{
    var rowhtml = "";
    $.each(hashdata, function (key, value) {
         key = key.replace(/-/g, ' / ');
         key = key.replace(/:/g, ' , ');

         var rowdata=countrow.replace('$row_key', key);
         rowdata=rowdata.replace('$row_val', value);

        //add row <tr> to var rowhtml   
        rowhtml += rowdata;          
    });

    //append populated rowhtml to TBODY
    $('#' + tablename + ' tbody').append(rowhtml);

    //You can do this
    $('#' + tablename).trigger("update");

    //or this if you want $('table').trigger('update');
}

You can do this things without problem, you need to take care that the elements must be loaded so execute all on $(document).ready.

There is no problem if the js script is on another file.