Swapping divs from each function gets duplicated twice jQuery-CodePudding

I want to swap 2 divs using jquery but when I tried to swap it using insertAfter() in gets inserted twice. Just want to specify that each parent element needs to only swap the divs once.

So in each parent element wcmsd-step-container I need to insert the wcmsd-checkbox-item-description class below the wcmsd-step-title class. But it gets duplicated twice when swapping it.

Can anyone point what's the right function to use on my jQuery code?

jQuery(document).ready(function() {
  jQuery('.wcmsd-step-container').each(function() {
    jQuery('.wcmsd-checkbox-item-description').insertAfter(jQuery('.wcmsd-step-title'));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!--Step 1-->
<div >

  <h2 >What type of photo do you want?</h2>

  <div >
    <label >choose your photo</label>
    <p >Select up to 122. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan faucibus proin nisi, risus vehicula. Fames metus, metus consectetur.</p>
  </div>

</div>

<!--Step 2-->
<div >

  <h2 >What type of video do you want?</h2>

  <div >
    <label >choose your video</label>
    <p >Select up to 322. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan faucibus proin nisi, risus vehicula. Fames metus, metus consectetur.</p>
  </div>

</div>

CodePudding user response：

Your code inside the loop has no relation to the loop, so it's just for (i=0;i<2; i) with the inner code saying "take all descriptions and put them all after every title" - you get two because there's two, if you had 3, you'd get 3 after each title.

You need to use this inside the loop to ensure the correct elements are moving to the correct place.

  $('.wcmsd-step-container').each(function() {
    $(this).find('.wcmsd-checkbox-item-description').insertAfter($(this).find('.wcmsd-step-title'));
  });

Updated snippet with a button to see before/after

$("#btn").click(() => {
  $('.wcmsd-step-container').each(function() {
    $(this).find('.wcmsd-checkbox-item-description').insertAfter($(this).find('.wcmsd-step-title'));
  });
});

.wcmsd-step-content { background-color: yellow; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="btn">click me</button>

<!--Step 1-->
<div >

  <h2 >What type of photo do you want?</h2>

  <div >
    <label >choose your photo</label>
    <p >Select up to 122. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan faucibus proin nisi, risus vehicula. Fames metus, metus consectetur.</p>
  </div>

</div>

<!--Step 2-->
<div >

  <h2 >What type of video do you want?</h2>

  <div >
    <label >choose your video</label>
    <p >Select up to 322. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan faucibus proin nisi, risus vehicula. Fames metus, metus consectetur.</p>
  </div>

</div>