JSFiddle - React, Tailwind, and code Playground

by TrueBlueAussie

HTML

<script id="template" type="text/template">
 <div class="single-list-item">
    <button>Remove</button>
  </div>
</script>

<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");
   $container.append($("#template").html());
});