title: How to dynamically add or remove form fields?
body: <p>I have the following <code>form</code>:</p>
  
  <pre><code>&lt;table&gt;            
      &lt;tr id="type"&gt;
          &lt;td&gt;&lt;label &gt;Type&lt;/label&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;select&gt;
                  &lt;option value="1"&gt;Audio&lt;/option&gt;
                  &lt;option value="2"&gt;Video&lt;/option&gt;
              &lt;/select&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr id="name"&gt;
         &lt;td&gt;&lt;label&gt;Name&lt;/label&gt;&lt;/td&gt;
         &lt;td&gt;&lt;input  type="text" name="name"&gt;&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr id="form_fields"&gt;
          &lt;td&gt;&lt;label&gt;comments&lt;/label&gt;&lt;/td&gt;
          &lt;td&gt;&lt;textarea rows="2" cols="2"&gt;&lt;/textarea&gt;&lt;/td&gt;
      &lt;/tr&gt;       
  
       &lt;tr&gt;
           &lt;td&gt;&lt;input type="button" id="addButton" value="Add More"&gt;&lt;/td&gt;
           &lt;td&gt;&lt;input type="button" id="removeButton" value="Remove"&gt;&lt;/td&gt; 
           &lt;td&gt;&lt;input type="button" id="resetButton" value="Reset"&gt;&lt;/td&gt; 
       &lt;/tr&gt;      
  
       &lt;tr&gt;
           &lt;td&gt;&lt;input type="submit" value="submit" /&gt;&lt;/td&gt;
       &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><br>
   I am trying to add some of above table rows <strong>dynamically</strong> like this:</p>
  
  <pre><code>&lt;div class="addThis"&gt;
      &lt;tr id="type"&gt;
          &lt;td&gt;&lt;label &gt;Type&lt;/label&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;select&gt;&lt;option value="1"&gt;Audio&lt;/option&gt;
              &lt;option value="2"&gt;Video&lt;/option&gt;&lt;/select&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr id="name"&gt;
          &lt;td&gt;&lt;label&gt;Name&lt;/label&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input  type="text" name="name"&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <h2>UPDATE</h2>
  
  <p>My requirement is,some of above fields like select, input tag should be added when I click on add button. </p>
  
  <p>1) Add button: on click of add button select and input tag should be added.</p>
  
  <p>2) Remove button: and on click of remove button. If above tags are added then they must be removed.</p>
  
  <p>To achieve this I tried something in jQuery, but I could not do this.</p>
  
  <pre><code>$(document).ready(function(){
  
      var counter = 2;
  
      $("#addButton").click(function () {
          if (counter &gt; 10) {
              alert("Only 5 textboxes allow");
              return false;
          }   
  
          var newText = $('.addThis');
          newTextBox.appendTo("#form_fields");
  
          counter++;
    });
  
  
    $("#removeButton").click(function () {
        if (counter == 1) {
            alert("No more textbox to remove");
            return false;
        }   
  
        counter--;
  
        $('addThis').remove();
    });
  
  });
  </code></pre>
  
  <p><br>
  Can anyone do give the demo on this?</p>