如何将此代码重用于多个元素？

Question

我有一个分页数据的功能。我在同一页面上有两个表需要分页。如果可能的话，我想重用两个表的函数。我曾尝试在两个表中使用该脚本，但是当我第二次调用脚本时，第一次调用的数据似乎被清除，第二次调用就是主流。

为什么会这样？

  $.fn.scroller = function(options) {
    var settings = {
      ele   : '',
      limit : 10,
      offset: 0,
      error : 'No More Posts!',
      delay : 500,
      scroll: true
    }

    if(options) {
      $.extend(settings, options);
    }

    return this.each(function() {
      $this      = $(this);
      $settings  = settings;
      var offset = $settings.offset;


      if($settings.scroll == true) $initmessage = 'Scroll for more or click here';
      else $initmessage = 'Click for more';
      $this.append('<tbody id="adi"></tbody><tfoot><tr><td id="more" colspan="2">'+$initmessage+'</tr></tr></tfoot>');

      function getData() {
        $.post('test.asp',{
          ele:$settings.ele,
          limit:$settings.limit,
          offset:offset,
        },
        function(data){
          $this.find('#more').html($initmessage);
          if(data == ""){
            $this.find('#more').html($settings.error);
          }else{
            offset = offset + $settings.limit;
            $this.find('#adi').append(data);
          }
        });
      }
      getData();

      if($settings.scroll == true){
        $(window).scroll(function(){
          if($(window).scrollTop() + $(window).height() > $this.height()){
            $this.find('#more').html('Loading Posts');
            setTimeout(function() {
              getData();
            }, $settings.delay);
          }
        });
      }
    });
  }

以下是对函数的调用

  $('#test1').scroller({
    ele:'test1',
    limit:60,
    offset:0,
    error:'End Articles',
    delay: 500,
    scroll:false
  });

  $('#test2').scroller({
    ele:'test2',
    limit:5,
    offset:0,
    error:'End Blogs',
    delay: 500,
    scroll:false
  });

修改

这是实际的HTML

  <table id="test1">
    <tbody>

    </tbody>
  </table>

和

  <table id="test2">
    <tbody>

    </tbody>
  </table>