Html structure affecting element cloning

Question

So, I have bunch of elements inside parent elements:

<div class="copyFrom">
    <div class="copyThese">copyThese1</div>
</div>
<div class="copyFrom">
    <div class="copyThese">copyThese2</div>
</div>

Also, I have separate .Parent element in which I append .copyHere elements to correspond the amount of .copyFrom elements

<div class="Parent">
    <div class="copyHere"></div>
    <div class="copyHere"></div>
</div>

Aaaalso, Inside .copyHere I clone every separate .copyThese elements

<div class="Parent">
    <div class="copyHere">
        <div class="copyThese">copyThese1</div>
    </div>
    <div class="copyHere">
        <div class="copyThese">copyThese2</div>
    </div>
</div>

Now, the problem is:

For some reason, if .Parent is below all the .copyFrom elements The .copyThese elements are cloned in just fine.

But.. If .Parent element is above The .copyFrom elements, the cloning of .copyThese elements goes haywire.

I need to have .Parent element both above and below. ( Without weird cloning problems.)

jsfiddle:

http://jsfiddle.net/lollero/mZhUG/2/ - Above - Correct

http://jsfiddle.net/lollero/mZhUG/3/ - Below - Problem

Answer 1

you should do:

  var copyThese = $('.copyFrom .copyThese');

because you are adding .copyThese elements at every iteration and keep cloning the same element. This doesn't happen if you add the elements After the one already present in the dom and so the problem is present only if .parent is prepended

fiddle here:

http://jsfiddle.net/mZhUG/4/