jQuery: добавление только один раз в каждом матче

Question

Нужно выбросить содержимое span .cat в div выше, но это событие выбрасывает все span .cat каждому div.

На выходе я получаю

date category category2 category3
date category category2 category3
date category category2 category3

Нужно ли

date category
date category2
date category3

$(document).ready(function() {
  $('.bdt-post-grid-category').wrapInner('<span class="bdt-post-grid-date cat"></span>');
  $('.bdt-post-grid-date.cat').appendTo($(".bdt-post-grid-meta"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bdt-post-grid-meta bdt-subnav bdt-flex-middle">
  <span class="bdt-post-grid-date">date</span>
</div>
<div class="bdt-post-grid-category bdt-position-small bdt-position-top-left">
  <a href="#" rel="category tag">category</a>
</div>

<div class="bdt-post-grid-meta bdt-subnav bdt-flex-middle">
  <span class="bdt-post-grid-date">date</span>
</div>
<div class="bdt-post-grid-category bdt-position-small bdt-position-top-left">
  <a href="#" rel="category tag">category2</a>
</div>

<div class="bdt-post-grid-meta bdt-subnav bdt-flex-middle">
  <span class="bdt-post-grid-date">date</span>
</div>
<div class="bdt-post-grid-category bdt-position-small bdt-position-top-left">
  <a href="#" rel="category tag">category3</a>
</div>

Answer 1

Используйте .each() для обработки каждого из них по отдельности, просто добавляя к предыдущему элементу.

$(document).ready(function() {
  $('.bdt-post-grid-category').wrapInner('<span class="bdt-post-grid-date cat"></span>');
  $('.bdt-post-grid-date.cat').each(function() {
    $(this).appendTo($(this).closest(".bdt-post-grid-category").prev());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bdt-post-grid-meta bdt-subnav bdt-flex-middle">
  <span class="bdt-post-grid-date">date</span>
</div>
<div class="bdt-post-grid-category bdt-position-small bdt-position-top-left">
  <a href="#" rel="category tag">category</a>
</div>

<div class="bdt-post-grid-meta bdt-subnav bdt-flex-middle">
  <span class="bdt-post-grid-date">date</span>
</div>
<div class="bdt-post-grid-category bdt-position-small bdt-position-top-left">
  <a href="#" rel="category tag">category2</a>
</div>

<div class="bdt-post-grid-meta bdt-subnav bdt-flex-middle">
  <span class="bdt-post-grid-date">date</span>
</div>
<div class="bdt-post-grid-category bdt-position-small bdt-position-top-left">
  <a href="#" rel="category tag">category3</a>
</div>