JQuery Dynamic Add/Remove Table

JQuery Dynamic Add/Remove Table with input text fields

by nobuts

HTML

<table id="dynamicTable1">
        <thead>
            <th>W</th>
            <th>L</th>
            <th>H</th>
            <th></th>
        </thead>
      <tr id="0">
        <td><input type="text" id="fld1"/></td>
        <td><input type="text" id="fld2"/></td>
        <td><input type="text" id="fld3"/></td>
         <td><button class="remove">Remove</button></td>
      </tr>
    </table>

  <input type="button" id="addrow" value="Add New Row" />

  <table class="samplerow" style="display:none">
    <tr>
      <td><input type="text" id="fld1"/></td>
      <td><input type="text" id="fld2"/></td>
      <td><input type="text" id="fld3"/></td>
       <td><button class="remove">Remove</button></td>
    </tr>
  </table>

JavaScript

jQuery(document).ready(function() {
        var id = 0;
      jQuery("#addrow").click(function() {
        id++;           
        var row = jQuery('.samplerow tr').clone(true);
        row.find("input:text").val("");
        row.attr('id',id); 
        row.appendTo('#dynamicTable1');        
        return false;
    });        
        
  $('.remove').on("click", function() {
  $(this).parents("tr").remove();
});
});