JQuery to create dynamic textboxes on button click

jquery

Solution

DEMO

$('#add').click(function () {
    var table = $(this).closest('table');
    if (table.find('input:text').length < 7) {
        table.append('<tr><td style="width:200px;" align="right">Name <td> <input type="text" id="current Name" value="" /> </td></tr>');
    }
});
$('#del').click(function () {
    var table = $(this).closest('table');
    if (table.find('input:text').length > 1) {
        table.find('input:text').last().closest('tr').remove();
    }
});

.closest()

.append()

Updated after OP's comment

DEMO

$('#add').click(function () {
    var table = $(this).closest('table');
    console.log(table.find('input:text').length);
    if (table.find('input:text').length < 7) {
        var x = $(this).closest('tr').nextAll('tr');
        $.each(x, function (i, val) {
            val.remove();
        });
        table.append('<tr><td style="width:200px;" align="right">First Name <td> <input type="text" id="current Name" value="" /> </td><td style="width:200px;" align="right">Last Name <td> <input type="text" id="current Name" value="" /> </td></tr>');
        $.each(x, function (i, val) {
            table.append(val);
        });
    }
});
$('#del').click(function () {
    var table = $(this).closest('table');
    if (table.find('input:text').length > 1) {
        table.find('input:text').last().closest('tr').remove();
    }
});

Problem

I am new to jQuery. I want to dynamically add two text boxes with labels `firstname` and `lastname` on clicking the "Add" button. ``` <table border="0" cellspacing="2"> <tr><td style= "width:200px;" align="right">Name <td> <input type="text" id="current Name" value="" /> </td></td> </tr> <tr> <td align="right">Test value</td> <td> <select id="test" style= "width:350px;"> </select> </td> </tr> <tr> <td align="right">datas</td> <td> <input type="button" id="add" value="Add" onclick="AddTables();"/> </td> </tr> <tr> <td style="height:3px" colspan="2"></td> </tr> <tr style="background-color: #383838"> <td></td> </tr> <tr> </tr> <tr> </div> </div> </td> </tr> </table> ``` http://jsfiddle.net/x7uQx/ I have a limit on adding the text boxes. Maximum of 7. At the same way, is there also a way to delete the text boxes?

Original source