How To Clone And Append A Table Row

I have a table that looks like this: When the user clicks on the + button I am trying to copy the row shown and append it below, but also with a remove link so something like this

Solution 1:

In what you tried, you forgot to include the # before the ID, that's why it didn't work, but still it would've appended the entire element to itself, causing all sorts of issues.

What you need to clone is the first <tr>.

$(function() {
    var$componentTB = $("#component_tb"),
        $firstTRCopy = $componentTB.children('tr').first().clone();
    $("#addRows").click(function() {
        $componentTB.append($firstTRCopy.clone());
    });
});

The double-.clone() is needed because the element stored in $firstTRCopy would get appended permanently otherwise, and in case it's removed from the DOM, you'll not get anything when you try to append it again. This way, it can be cloned every time it's needed.

---

In your code you have a text input with the ID component_thickness. While this code in itself will not cause duplicate IDs to appear, you will need to edit that input and get rid of the ID, probably making it a class.

Solution 2:

Try this This will clone a table

$("input.tr_clone_add").live('click', function() {
var$tr    = $(this).closest('.tr_clone');
var$clone = $tr.clone();
$clone.find(':text').val('');
$tr.after($clone);
});