Filter entering problem when refreshing continously

by Herst

HTML

<script src="https://rawgit.com/Mottie/tablesorter/master/js/jquery.tablesorter.js"></script>
<script src="https://rawgit.com/Mottie/tablesorter/master/js/widgets/widget-math.js"></script>
<script src="https://rawgit.com/Mottie/tablesorter/master/js/widgets/widget-filter.js"></script>
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/dist/css/theme.default.min.css">
<table id="table1" class="tablesorter">
  <thead>
    <tr>
      <th>Foo</th>
      <th>Bar</th>
    </tr>
  </thead>
    
  <tbody></tbody>

</table>

<button type="button" id="btnLoad">Load Data</button>

JavaScript

$('#table1').tablesorter({
  widgets: ['zebra', 'filter']
});

function updateData() {
  var $tblBody = $("#table1 tbody");
  
  $tblBody.empty();
  
  for (var i=0; i < 33; ++i) {
    $("<tr></tr>")
      .append("<td>" + (Math.floor(Math.random() * (1000000-100000)) + 100000) + "</td><td>" + (Math.floor(Math.random() * (1000000-100000)) + 100000) + "</td>")
      .appendTo($tblBody);
  }
  
  $("#table1").trigger("update");  
}

setInterval(updateData, 1000);