Добавьте CTA после каждого 6-го элемента списка и еще одно объявление CTA каждые 6, начиная с номера 4 (jQuery)

Question

У меня есть список с элементами, и я хочу добавить два разных бара CTA, то есть я другой контейнер (не может изменить разметку). Я хочу добавить cta бары как каждый 6-й элемент, но первый cta бары должны начинаться с номера четыре (после номера три).

Я пробовал ".listing__item: nth-child (6n - 3)", и он работает нормально, если я использую только этот cta bar, но когда у меня есть другой cta bar, расчет не работает.

(function($) {
    $('.cta__price').detach().insertAfter(
		$('.listing.example').find('.listing__item:nth-child(6n - 3)')
	);
	$('.cta__contact').detach().insertAfter(
		$('.listing.example').find('.listing__item:nth-child(6n)')
	);
})(jQuery);

.container {
  padding: 20px;
}
.container.example {
  display: flex;
  flex-flow: row wrap;
  margin: -20px 0 0 -20px;
}
.container.example .listing__item {
  background-color: pink;
  margin: 20px 0 0 20px;
  width: calc(100% / 3 - 20px);
}
.container.example .cta__item {
  margin: 20px 0 0 20px;
  width: calc(100% - 20px);
  background: lightblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
    <div class="contaier cta">
        <div class="cta__item cta__price">USE THE PRICE CALCULATOR</div>
        <div class="cta__item cta__contact">QUESTIONS - CALL US</div>
    </div>
    <!-- Example with my code -->
    <div class="container listing example">
        <div class="listing__item">One</div>
        <div class="listing__item">Two</div>
        <div class="listing__item">Three</div>
        <div class="listing__item">Four</div>
        <div class="listing__item">Five</div>
        <div class="listing__item">Six</div>
        <div class="listing__item">Eleven</div>
        <div class="listing__item">Twelve</div>
        <div class="listing__item">Thirteen</div>
        <div class="listing__item">Fourteen</div>
        <div class="listing__item">Fifthteen</div>
        <div class="listing__item">Sixteen</div>
        <div class="listing__item">Seventeen</div>
        <div class="listing__item">Eightteen</div>
        <div class="listing__item">Nineteen</div>
        <div class="listing__item">Twenty</div>
        <div class="listing__item">TwentyOne</div>
        <div class="listing__item">TwentyTwo</div>
        <div class="listing__item">TwentyThree</div>
        <div class="listing__item">TwentyFour</div>
        <div class="listing__item">TwentyFive</div>
        <div class="listing__item">TwentySix</div>
        <div class="listing__item">TwentySeven</div>
        <div class="listing__item">TwentyEight</div>
        <div class="listing__item">TwentyNine</div>
        <div class="listing__item">Thirty</div>
        <div class="listing__item">ThirtyOne</div>
    </div>
</section>

Answer 1

Если вы используете 7n вместо 6n, он работает так, как вы хотите.