Swapping divs from each function gets duplicated twice jQuery

Question

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 class="wcmsd-step-container">

  <h2 class="wcmsd-step-title">What type of photo do you want?</h2>

  <div class="wcmsd-step-content">
    <label class="wcmsd-checkbox-item-title">choose your photo</label>
    <p class="wcmsd-checkbox-item-description">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 class="wcmsd-step-container">

  <h2 class="wcmsd-step-title">What type of video do you want?</h2>

  <div class="wcmsd-step-content">
    <label class="wcmsd-checkbox-item-title">choose your video</label>
    <p class="wcmsd-checkbox-item-description">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>

Answer 1

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 class="wcmsd-step-container">

  <h2 class="wcmsd-step-title">What type of photo do you want?</h2>

  <div class="wcmsd-step-content">
    <label class="wcmsd-checkbox-item-title">choose your photo</label>
    <p class="wcmsd-checkbox-item-description">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 class="wcmsd-step-container">

  <h2 class="wcmsd-step-title">What type of video do you want?</h2>

  <div class="wcmsd-step-content">
    <label class="wcmsd-checkbox-item-title">choose your video</label>
    <p class="wcmsd-checkbox-item-description">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>