title: Jquery plugin not work properly on multiple element
body: <p>I have created my own simple jquery plugin,but im having some problem when i put 2 elements and call the plugin on each element</p>
  
  <p>my js code:</p>
  
  <pre><code>function fTable(element,options){
      self          = this;
      this.$element = $(element);
      this.table    = $(this.$element).find('table');
      this.thead    = $(this.table).find('thead');
      this.tbody    = $(this.table).find('tbody');
      coloumn       = options.coloumn;
  
      this.defaults = {
  
      }
  
      //Merge default options with user options
      this.options = $.extend(true, {}, this.defaults, options);
      this.init();
  }
  
  fTable.prototype = {
      init : function(){
          self = this;
          this.td = $(this.thead).find('tr td:first');
          $(this.td).html('&lt;a class="add"&gt;Plus&lt;/a&gt;');
          this.bindEvents();
      },
  
      bindEvents : function(){
          self = this;
          console.log(this.table);
          $(this.table).on('click', '.add', function(){
              $row =  '&lt;tr&gt;';
              $row += '&lt;td&gt;&lt;/td&gt;';
  
              $.each(coloumn, function(index, value){
                  $row += '&lt;td&gt;&lt;input type="text" value="" name='+value.name+' '+value.prop+'&gt;&lt;/td&gt;';
              });
  
              $row += '&lt;/tr&gt;';
              console.log(self);
              $($row).appendTo(self.table);
              lastTR = $(self.tbody).find('tr:last');
              $(lastTR).find('td:first').html('&lt;a class="remove"&gt;Remove&lt;/a&gt;');
          });
  
          $(this.table).on('click', '.remove', function(){
              row = $(this).closest('tr');
              $(row).remove();
          });
      }
  }
  
  $.fn.fTable = function(options){
      return this.each(function(){
          new fTable(this,options);
      });
  }
  
  $('.crud').fTable({
          coloumn:[
              {'type':'text','name':'NIK','prop':'disabled'},
              {'type':'text','name':'NAME','prop':''},
          ]
      }); 
  
  $('.crud2').fTable({
      coloumn:[
          {'type':'text','name':'NIK','prop':'disabled'},
          {'type':'text','name':'NAME','prop':''},
      ]
  }); 
  </code></pre>
  
  <p>HTML : </p>
  
  <pre><code>&lt;div class="crud"&gt;
      &lt;table class="table table-bordered"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;td style="width:10%"&gt;&lt;/td&gt;
                  &lt;td&gt;NIK&lt;/td&gt;
                  &lt;td&gt;Name&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;1&lt;/td&gt;
                  &lt;td&gt;Ardhi&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;2&lt;/td&gt;
                  &lt;td&gt;Mega&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;div class="crud2"&gt;
      &lt;table class="table table-bordered"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;td style="width:10%"&gt;&lt;/td&gt;
                  &lt;td&gt;NIK&lt;/td&gt;
                  &lt;td&gt;Name&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;1&lt;/td&gt;
                  &lt;td&gt;Zaphire&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;2&lt;/td&gt;
                  &lt;td&gt;Rexa&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is when i clicked the 'plus' on 1st table(class='crud') it will add new row to 2nd table(class='crud2') instead of 1st table(class='crud')</p>
  
  <p>Any help?</p>