title: jQuery - add / remove table rows
body: <p>From my selection on the right I dynamically construct (clone) a set of rows to the left. There I also add a REMOVE button. I can't call a jQuery function from that button. Also upon clicking the REMOVE button how can I set the checkbox of the respective row on the right to its previous state (checked). There is all the code below.
  Thank you.</p>
  
  <p>
      
      
      
      Example
      
      
        &lt;/script>
      </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function(){
  
      $("#row_remove").click(function() {       
      alert("1");
      });
  
   $('#tb11 tr')
   .filter(':has(:checkbox:checked)')
   .addClass('selected')
   .end()
    .click(function(event) {
      //alert("1");
  
      $(this).toggleClass('selected');
  
          if (event.target.type !== 'checkbox') {
  
              $(':checkbox', this).attr('checked', function() {
  
                  if ($(this).is(":checked"))
                  {
                    $(this).closest("tr").clone().appendTo("#tbl2").append("&lt;label&gt;&lt;input type='text' name='textfield' id='textfield'/&gt;&lt;/label&gt;&lt;button id='row_remove'&gt;remove&lt;/button&gt;");
  
                    //ac 1
                    var findCheckBox = $("#tbl2 input:checkbox.chkclass");
                    findCheckBox.remove();
  
                  }
                  else
                  {
                    var index = $(this).closest("tr").attr("id");
                    var findRow = $("#tbl2 tr[id='" + index + "']");
                    findRow.remove();
                  }
  
              return !this.checked;
  
              });
          }
    });
  
  });
  &lt;/script&gt;
  
  &lt;style type="text/css"&gt;
  
  table {
      text-align: center;
  }
  .right {
      text-align: left;
  }
  .right {
      text-align: left;
  }
  
    article, aside, figure, footer, header, hgroup,
    menu, nav, section { display: block; }
  
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;table width="100%" border="0" cellpadding="4"&gt;
    &lt;tr&gt;
      &lt;td width="32%" rowspan="3" valign="top" bgcolor="#EAEAEA"&gt;
  
      &lt;table width="100%" border="0"&gt;
  
        &lt;tr id="tbl2" width="100%"&gt;
         &lt;!-- &lt;td height="101" valign="top" bgcolor="#FFFFFF" class="right"&gt;&amp;nbsp;&lt;/td&gt;--&gt;
        &lt;/tr&gt;
      &lt;/table&gt;&lt;/td&gt;
      &lt;td width="1%" bgcolor="#EAEAEA"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td width="67%" colspan="3" rowspan="3" valign="top" bgcolor="#EAEAEA"&gt;
  
      &lt;table id="tb11" width="100%" border="0"&gt;
      &lt;tbody&gt;
        &lt;tr id="1"&gt;
          &lt;td width="5%" height="20" valign="top" bgcolor="#FFFFFF"&gt;&lt;input type="checkbox"  class="chkclass"  value="yes" checked="checked" /&gt;&lt;/td&gt;
          &lt;td width="95%" valign="top" bgcolor="#FFFFFF" class="right"&gt;item 1&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr id="2"&gt;
          &lt;td width="5%" height="20" valign="top" bgcolor="#FFFFFF"&gt;&lt;input type="checkbox"  class="chkclass"  value="yes" checked="checked"  /&gt;&lt;/td&gt;
          &lt;td width="95%" height="20" valign="top" bgcolor="#FFFFFF" class="right"&gt;item 2&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr id="3"&gt;
          &lt;td width="5%" height="20" valign="top" bgcolor="#FFFFFF"&gt;&lt;input type="checkbox"  class="chkclass"  value="yes" checked="checked"  /&gt;&lt;/td&gt;
          &lt;td width="95%" height="20" valign="top" bgcolor="#FFFFFF" class="right"&gt;item 3&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr id="4"&gt;
          &lt;td width="5%" height="20" valign="top" bgcolor="#FFFFFF"&gt;&lt;input type="checkbox"  class="chkclass"  value="yes"  checked="checked" /&gt;&lt;/td&gt;
          &lt;td width="95%" height="20" valign="top" bgcolor="#FFFFFF" class="right"&gt;item 4&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr id="5"&gt;
          &lt;td width="5%" height="20" valign="top" bgcolor="#FFFFFF"&gt;&lt;input type="checkbox"  class="chkclass"  value="yes" checked="checked"  /&gt;&lt;/td&gt;
          &lt;td width="95%" height="20" valign="top" bgcolor="#FFFFFF" class="right"&gt;item 5&lt;/td&gt;
        &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
  
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td bgcolor="#EAEAEA"&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td bgcolor="#EAEAEA"&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>