title: misbehave javascript when the associate class has multiple instance
body: <p>The Js snippet below work for single html table (class = mtable), basically it will freeze the first column when i scroll left on the table.  it misbehave when i have multiple "mtable" class html table where scroll at one table will cause all the table scroll at the same time.  How should i fix this so that each table will work independently?</p>
  
  <pre><code>$(document).on('mouseover', '.mtable tbody', function(){
      // alert('scrolling');
      $('.mtable tbody').on('scroll', function() {
        $('.mtable thead').css("left", -$(".mtable tbody").scrollLeft());
        $('.mtable thead tr th:first-child').css("left", $(".mtable tbody").scrollLeft()-2);
        $('.mtable tbody tr td:first-child').css("left", $(".mtable tbody").scrollLeft()-2);
      });
  });
  </code></pre>