JSFiddle - React, Tailwind, and code Playground

by Mohamed Mulla

HTML

<div class="list-container">
  <div class="single-list-item">
    <button>Remove</button>
  </div>
  <div class="single-list-item">
    <button>Remove</button>
  </div>
  <div class="single-list-item">
    <button>Remove</button>
  </div>
</div>
<p>
  <button class="add-list-item">Add</button>
</p>

<div class="list-container">
  <div class="single-list-item">
    <button>Remove</button>
  </div>
  <div class="single-list-item">
    <button>Remove</button>
  </div>
  <div class="single-list-item">
    <button>Remove</button>
  </div>
</div>
<p>
  <button class="add-list-item">Add</button>
</p>

<div class="list-container">
  <div class="single-list-item">
    <button>Remove</button>
  </div>
  <div class="single-list-item">
    <button>Remove</button>
  </div>
  <div class="single-list-item">
    <button>Remove</button>
  </div>
</div>
<p>
  <button class="add-list-item">Add</button>
</p>

JavaScript

$(".add-list-item").on("click", function() {
   var $container =$(this).closest('p').prev(".list-container");
   $(".single-list-item:last", $container).clone().appendTo($container);
});