jQuery + Appending a clone multiple times, at different times?

javascript, jquery

Solution

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

Problem

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?

Original source