Cloning objects in jquery

Question

When you click on the buttons + Добавить место работы and + Добавить учебное заведение this object should be copied and appear for information input. 1 click = 1 clone. But I get a lot of clones. What was I wrong about? http://test.bikstart.ru/niz-vac/index2.html

$('.add-study').on('click', function() {
  $('.table-vac--study').clone([true]).appendTo(".form__item__study");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form__item form__item__study">
  <div class="form__item__wrap">
    <img src="img/numer-quest.png" alt="">
    <!--<span>1</span>-->
    <div class="form__wrap">
      <h2 class="h2-quest">Образование</h2>
      <span>Укажите учебные заведения, в которых Вы учились или учитесь</span>
    </div>
  </div>

  <table class='table-vac table-vac--study table-vac-none'>
    <tr class='tr-vac'>
      <td class='td-vac quest-title'>Учебное заведение</td>
      <td class='td-vac'><input type="text" placeholder="Учебное заведение" required id="study"></td>
    </tr>

    <tr class='tr-vac'>
      <td class='td-vac quest-title'><span class='star'>*</span> Специальность</td>
      <td class='td-vac'><input type="text" placeholder="Специальность" required id="specialty"></td>
    </tr>

    <tr class='tr-vac'>
      <td class='td-vac quest-title'><span class='star'>*</span> Год окончания</td>
      <td class='td-vac'><input type="number" required id="year-ending"></td>
    </tr>

    <tr class='tr-vac'>
      <td></td>
      <td class="add-study">+ Добавить учебное заведение</td>
    </tr>
  </table>


  <div class="pseudo-table">
    <div class="pseudo-table__item">
      <pseudo-table-title>Учебное заведение</pseudo-table-title>
      <input type="text" placeholder="Учебное заведение" required id="study1">
    </div>

    <div class="pseudo-table__item">
      <pseudo-table-title><span class='star'>*</span> Специальность</pseudo-table-title>
      <input type="text" placeholder="Специальность" required id="specialty1">
    </div>

    <div class="pseudo-table__item">
      <pseudo-table-title><span class='star'>*</span> Год окончания</pseudo-table-title>
      <input type="number" required id="year-ending1">
    </div>
  </div>

  <!--<span class="add-study">+ Добавить учебное заведение</span>-->
</div>

Answer 1

Your problem is that you have multiple elements with the class table-vac--study after you have added the first clone to the DOM:

$('.table-vac--study')  //this gets all elements with the class

If you only want one element with the class, you need to specify what element in the class you want.

If you want to the closest element with the class table-vac--study, you can use DOM traversal:

$(this).closest('.table-vac--study').clone([true]).appendTo(".form__item__study");

If you always want the first element with the class:

$('.table-vac--study:first').clone([true]).appendTo(".form__item__study");