Question

I have this form which has a section where a user can specify an indefinite number of value pairs, specifically, a language and a level of proficiency.

I have the DOM structured like this:

<ul id="language-list">
    <li class="user-language-item">
        <select name="language[]" class="user-language-select">...</select>
        Level: <select name="proficiency[]">...</select>
        <input type="button" value="Remove" class="remove-language" />
    </li>
    <li class="user-language-item">
        <select name="language[]" class="user-language-select">...</select>
        Level: <select name="proficiency[]">...</select>
        <input type="button" value="Remove" class="remove-language" />
    </li>
    <li class="user-language-item">
        <select name="language[]" class="user-language-select">...</select>
        Level: <select name="proficiency[]">...</select>
        <input type="button" value="Remove" class="remove-language" />
    </li>
</ul>
<input type="button" value="Add another language..." id="add-a-language" />

If the user clicks on the Add another language... button, a new list item containing the same form elements should be inserted to the list.

And here is my code:

$(function(){

    //Save a clone of one list item during initialization.
    var liItem = $('.user-language-item').last().clone(); 

    $('#add-a-language').click(function(){

        //Append the clone to the list item. But this only works once!
        $('#language-list').append(liItem);

    });

    //Note that there might be an instance where there are no list items present, which is why I opted to clone the a list item during initialization.
    $('.remove-language').live('click', function(){
        $(this).parents('li.user-language-item').fadeOut(500, function(){
            $(this).remove();
        });
    });

}); 

But the clone seems to be only usable once. Upon clicking the Add a language... button the second time, no list item is appended. (Interestingly, when I output the variable on the console, it still contains the clone!)

One way around this would be saving the HTML mark-up as a string, but I am avoiding this approach as the elements are dynamically loaded via PHP, and I’d rather just change one part of my code whenever I need to modify the mark-up.

How can I possibly make this work?

Answer 1

You will have to clone it every time when you want to add

 $('#add-a-language').click(function(){
       var liItem = $('.user-language-item').last().clone(); 
        //Append the clone to the list item. But this only works once!
        $('#language-list').append(liItem);

    });

Demo

As per comment:

Keep one li like this:

<li class="user-language-item hidden" id="placeHolderLi">
    <select name="language[]" class="user-language-select">...</select>
    Level: <select name="proficiency[]">...</select>
    <input type="button" value="Remove" class="remove-language" />
</li>

Where .hidden just marks it to display:none;

.hidden{
  display:none;
}

Then while cloning you always clone this li and make it visible so that even if user has deleted all the li, new elements can still be added.

$('#add-a-language').click(function(){
      var liItem = $('.user-language-item:first').clone(true).show();
      //Append the clone to the list item. But this only works once!
      $('#language-list').append(liItem);
 });

Demo