How to detach and append to relevant div only jQuery

Question

I am trying to detach the div from the relevant parent and then append to the same parent div.

//Jquery Code
jQuery(function(){
    moveColorDots();

});
function moveColorDots(){
    var copyDivData = jQuery('.variations_form.wvs-archive-variation-wrapper').detach();
    copyDivData.appendTo('.product-variations');
}

<div class="pp-content-post">
    <div class="variations_form wvs-archive-variation-wrapper">
      some data here
    </div>
    <div class="product-box">
        <div class="glasses-sec">
            <h3>title</h3>
        </div>
        <div class="product-variations"></div>
    </div>
</div>

Expected result.

But after running the above code I am getting the following result.

Answer 1

.detach Description: Remove the set of matched elements from the DOM.

That means you append all the detached elements to every product-variations element..So

• You need to loop through the variations_form.wvs-archive-variation-wrapper elements by using .each()

• Also you can use .appendTo() directly

 //Jquery Code jQuery(function(){ moveColorDots(); }); function moveColorDots(){ jQuery('.variations_form.wvs-archive-variation-wrapper').each(function(){ var product_variations = jQuery(this).next('div').find('.product-variations'); jQuery(this).appendTo(product_variations); }); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="pp-content-post"> <div class="variations_form wvs-archive-variation-wrapper"> some data here 1 </div> <div class="product-box"> <div class="glasses-sec"> <h3>title</h3> </div> <div class="product-variations"></div> </div> </div> <div class="pp-content-post"> <div class="variations_form wvs-archive-variation-wrapper"> some data here 2 </div> <div class="product-box"> <div class="glasses-sec"> <h3>title</h3> </div> <div class="product-variations"></div> </div> </div>

Note: This line of code var product_variations = jQuery(this).next('div').find('.product-variations'); is depending on your html structure it works for the posted html here.. But if you've another html structure you need to modify it to catch the desired element