How to dynamically add or remove form fields?

Question

I have the following form:

<table>            
    <tr id="type">
        <td><label >Type</label></td>
        <td>
            <select>
                <option value="1">Audio</option>
                <option value="2">Video</option>
            </select>
        </td>
    </tr>

    <tr id="name">
       <td><label>Name</label></td>
       <td><input  type="text" name="name"></td>
    </tr>

    <tr id="form_fields">
        <td><label>comments</label></td>
        <td><textarea rows="2" cols="2"></textarea></td>
    </tr>       

     <tr>
         <td><input type="button" id="addButton" value="Add More"></td>
         <td><input type="button" id="removeButton" value="Remove"></td> 
         <td><input type="button" id="resetButton" value="Reset"></td> 
     </tr>      

     <tr>
         <td><input type="submit" value="submit" /></td>
     </tr>
</table>

I am trying to add some of above table rows dynamically like this:

<div class="addThis">
    <tr id="type">
        <td><label >Type</label></td>
        <td>
            <select><option value="1">Audio</option>
            <option value="2">Video</option></select>
        </td>
    </tr>

    <tr id="name">
        <td><label>Name</label></td>
        <td><input  type="text" name="name"></td>
    </tr>
</div>

---

UPDATE

My requirement is,some of above fields like select, input tag should be added when I click on add button.

1) Add button: on click of add button select and input tag should be added.

2) Remove button: and on click of remove button. If above tags are added then they must be removed.

To achieve this I tried something in jQuery, but I could not do this.

$(document).ready(function(){

    var counter = 2;

    $("#addButton").click(function () {
        if (counter > 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();
  });

});

Can anyone do give the demo on this?

Answer 1

It looks like you're a bit lost here, even after updating your question. This code should work, but I'm just ASSUMING your page should look like this.

I've replaced useless IDs with CLASSES, so you avoid ID duplication, but of course you can work around it and put back the IDs if necessary.

HTML

<table id="TextBoxesGroup">
    <tr class="type">
        <td>
            <label>Type</label>
        </td>
        <td>
            <select>
                <option value="1">Audio</option>
                <option value="2">Video</option>
            </select>
        </td>
    </tr>
    <tr class="name">
        <td>
            <label>Name</label>
        </td>
        <td>
            <input type="text" name="name" />
        </td>
    </tr>
    <tr class="comments">
        <td>
            <label>comments</label>
        </td>
        <td>
            <textarea rows="2" cols="2"></textarea>
        </td>
    </tr>
</table>
<table>
    <tr>
        <td>
            <input type="button" id="addButton" value="Add More" />
        </td>
        <td>
            <input type="button" id="removeButton" value="Remove" />
        </td>
        <td>
            <input type="button" id="resetButton" value="Reset" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="submit" value="submit" />
        </td>
    </tr>
</table>

Javascript (jQuery)

$(function () { // Short way for document ready.
    $("#addButton").on("click", function () {
        if ($(".type").length > 10) { // Number of boxes.
            alert("Only 5 textboxes allow");

            return false;
        }

        var newType = $(".type").first().clone().addClass("newAdded"); // Clone the group and add a new class.
        var newName = $(".name").first().clone().addClass("newAdded"); // Clone the group and add a new class.

        newType.appendTo("#TextBoxesGroup"); // Append the new group.
        newName.appendTo("#TextBoxesGroup"); // Append the new group.
    });

    $("#removeButton").on("click", function () {
        if ($(".type").length == 1) { // Number of boxes.
            alert("No more textbox to remove");

            return false;
        }

        $(".type").last().remove(); // Remove the last group.
        $(".name").last().remove(); // Remove the last group.
    });

    $("#resetButton").on("click", function () {
        $(".newAdded").remove(); // Remove all newly added groups.
    });
});

Demo