Question

I have created a box using a div.

<div class="panel" style="display:inline; float:left;position: relative; width: 140px; height: 200px; border:solid 2px; border-color: red;cursor: pointer;"></div>

I tried to use jQuery to clone the element and append the clone to itself, but it doesn’t work as expected.

for (; i < noC; i++) {
    $(".panel").clone().appendTo($(".panel"));
}

I want each box to be added after the last box.

[]     // noC = 1
[][]   // noC = 2
[][][] // noC = 3

Instead, each new box gets inserted inside of the previous box.

[]     // noC = 1
[[]]   // noC = 2
[[[]]] // noC = 3

How do I do that?

Answer 1

noC = 3;
for(i= 0; i < noC;i++) {
    $("#panel").append(function(){     
        return $("#panel").find('div').length==0?$(this).clone(): $("#panel").find('div:first').clone();
    });
}​

for live demo see this link: http://jsfiddle.net/nanoquantumtech/PBBNe/
//Or

     noC = 3;
    for(i= 0; i < noC;i++) {
    $("body").append($("#panel:first").clone());        
     }​

for live demo see this link: http://jsfiddle.net/nanoquantumtech/HvnbU/