jQuery append() only working first time

Question

Strange issue. I've got the following code:

// remove template row from DOM and store in variable

var $addDegreeRow = $('.addDegreeRow').remove();
$('#addDegreeLink').click(function (ev) {
    ev.preventDefault();
    $('.degreeSection').append($addDegreeRow);
});

I'm selecting an element from the DOM, removing it, and preserving its content in a selector $addDegreeRow. Then I'm assigning a click event to a link on the page that appends the stored selector to an existing div on the page.

The first time I through the click event everything works perfectly. But the second time through nothing gets appended. And if I look at the HTML in firebug, the .degreeSection div gets highlighted each time I perform the click, even if nothing else is being appended. It's like jQuery is overwriting the old $addDegreeRow append with the new one, instead of just adding another one.

Has anyone come across this issue before? Thanks.

Answer 1

You are appending the same element again and again. If you want a copy of that element, you have to clone() it first.