Question

Have a bit of problem with the jQuery clone() functionality. Basically I have a list:

<ul id="portfolio">
 <li id=1><button class="save">content...</button></li>
 <li id=2><button class="save">content...</button></li>
 <li id=3><button class="save">content...</button></li>
 <li id=4><button class="save">content...</button></li>
 <li id=5><button class="save">content...</button></li>
</ul>

and I want to clone the content of a specific list whenever the user hits that lists “save” button. So far I have this jQuery:

$('.save').click(function() {
 var id = 1;
 $('#portfolio li').each(
  function() { 
    $(this).attr('id', 'id' + id++); 
 });
 $('#id1').clone().appendTo('#drop');
});

This code makes enables the user to clone #id1 so it is a start. But how can I get the functionality I’m looking for?

Thanx!

Answer 1

You target the save button, and clone the parent.

$('.save').click(function() { $(this).parent('li').clone().appendTo('#drop'); });

Here’s an Example

Important Note: You should change the ID of the clones item so that there won’t be any collisions!