cloning elements, avoiding more than one clone at a time when adding

Question

http://jsfiddle.net/p57hm/

I simply want one more clone on each click. Did i miss something obvious_ Thanks

Script:

$(function(){

    $('input').click(function(){
        $('.cloneitem').clone().appendTo('#container');
    });

});

HTML:

<input type="button" value="clone it"/>

<div id="container"></div>

<div class="cloneitem">clone</div>

Answer 1

Try this http://jsfiddle.net/p57hm/1/

$(function(){

    $('input').click(function(){
        $('.cloneitem:first').clone().appendTo('#container');
    });

});

Currently you are cloning all the elements that have the class .cloneitem but you only want 1 at a time, so you don't want to select all the .cloneItem but just the first one, and clone that one.

Answer 2

$('.cloneitem') selects all elements with cloneitem class.

use .first():

$('input').click(function(){
    $('.cloneitem').first().clone().appendTo('#container');
});