JSFiddle - React, Tailwind, and code Playground

HTML

<!-- .Parent is prepended here -->

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

<!-- .Parent is appended here -->


<!-- 

Of course wanted result is what happens when you append .Parent.
But, I need to generate Parent to both above and below .copyFrom elements.

-->

CSS

.copyHere .copyThese { color: red; } /* The duplicated elements */

JavaScript

// $('body').append('<div class="Parent" />');
$('body').prepend('<div class="Parent" />');

// prepending fails for some reason. ( You know how when you test it. )
// as far as what I've tested, it doesn't matter if you prepend or append, as long as .Parent is above it seems to mess things up.

$('.copyFrom').each(function(){    
    $('.Parent').append('<div class="copyHere" />'); 
});

$('.copyHere').each(function(){
    var copyHere = $(this).index();
    var copyThese = $('.copyThese');
    copyThese.eq( copyHere ).clone().appendTo( $(this) );
});