Как добавить и удалить элемент после клона jquery?

Question

хочу сделать как на картинке ниже. Отображает кнопку удаления на предыдущем элементе и помещает кнопку добавления для следующего элемента. Пример

Я уже сделал это, но не знаю, как добавлять и удалять одновременно.

var btn_delete = '<button type="button" onclick="removeKolom($(this))">Delete</button>';

function removeKolom(e){
	e.parents('.kolom').remove();
}

function addElement(e) {
	$(".kolom:last").clone().appendTo(".data-repeater"); 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
<thead>
  <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
   <th>Act</th>
</tr>
</thead>
<tbody class="data-repeater">
  <tr class="kolom">
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
    <td class="btn-repeater">
     <button class="add-btn-repeat" onclick="addElement($(this))" type="button">Add</button>
     </td>
  </tr>
</tbody>
</table>

Answer 1

Вы можете изменить свою функцию addElement следующим образом:

function addElement(e) {
   var $kolomLast = $(".kolom:last");
   $kolomLast.clone().appendTo(".data-repeater");
   $kolomLast.find(".add-btn-repeat").replaceWith(btn_delete);
}

Вы можете сохранить ссылку на последний элемент строки, и после его клонирования вы можете изменить его кнопку с Add на Delete.

Answer 2

var btn_delete = '<button type="button" onclick="removeKolom($(this))">Delete</button>';
var btn_add = '<button class="add-btn-repeat" onclick="addElement($(this))" type="button">Add</button>';

function removeKolom(e) {
  e.parents('.kolom').remove();
}

function addElement(e) {
  var newElement = $(".kolom").first().clone();
  $(".kolom").find('button.add-btn-repeat').replaceWith(btn_delete);
  newElement.appendTo(".data-repeater").find('button').replaceWith(btn_add);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>Act</th>
    </tr>
  </thead>
  <tbody class="data-repeater">
    <tr class="kolom">
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td class="btn-repeater">
        <button class="add-btn-repeat" onclick="addElement($(this))" type="button">Add</button>
      </td>
    </tr>
  </tbody>
</table>