JQUERY Loop сбрасывает весь контент в первый div с классом .course

Question

Я разрабатываю цикл с jquery, где он:

Находит Div с классом "course", он оборачивает этот div в два других div "tabs" и "tap", затем добавляет два другихHTML-тэги: и

Каждый раз, когда он циклически проходит - он берет первую текстовую ссылку привязки - помещает ее в переменную с именем «accordionID» и устанавливает идентификатор поля ввода, а также «для», на который ссылаются вэтикетка.

Однако, когда я запускаю код, он выводит весь контент в первый div с классом "course" вместо того, чтобы один раз входить в div с классом "course", выполняя все инструкции циклазатем переходим к следующему div с классом «course». Он также устанавливает все идентификаторы в самый первый текст ссылки на якорь.

Что мне здесь не хватает?

$(".course").each(function(index) {
  var accordionID = $(".course > a").html()
  $(this).wrap("<div class='tabs'></div>");
  $(this).wrap("<div class='tab'></div>");
  $(this).prepend("<input type= 'checkbox' id='" + accordionID + "-chck1'>");
  $(".course > a").wrap("<label class='tab-label' for='" + accordionID + "-chck1'></label>");

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabs">
  <div class="tab">
    <div class="course">
      <input type="checkbox" id="chck1">
      <a href="#">Introductory Module</a>
      <div class="tab-content">
        <ul class="course-setion">
          <li><a href="#1">Faculty Intro Maria</a></li>
          <li><a href="#2">Faculty Intro John</a></li>
          <li><a href="#3">Faculty Intro Laney</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>