JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parentDiv1">
  <div class="newDiv">
    <p>This is the div i need to duplicate</p>
  </div>
   <button onclick="repeat()" class="addB">+</button>
</div>

<div class="parentDiv2">
  <div class="newDiv">
    <p>This is the div i need to duplicate</p>
  </div>
   <button onclick="repeat()" class="addB">+</button>
</div>

<div class="parentDiv3">
  <div class="newDiv">
    <p>This is the div i need to duplicate</p>
  </div>
   <button onclick="repeat()" class="addB">+</button>
</div>

<div class="parentDiv4">
  <div class="newDiv">
    <p>This is the div i need to duplicate</p>
  </div>
   <button onclick="repeat()" class="addB">+</button>
</div>

CSS

.newDiv {
  display: none;
}

JavaScript

$(document).ready(function() {
  $(".addB").click(function() {
    $(".newDiv")
      .eq(0)
      .clone()
      .insertAfter(".newDiv:last")
      .show();
  });

  $(document).on('click', '.addB button[type=submit]', function(e) {
    e.preventDefault()
    var $frm = $(this).closest('.addB');
    console.log($frm.serialize());
    $.ajax(
      $frm.attr('action'), {
        method: $frm.attr('method'),
        data: $frm.serialize()
      }
    );
  });
});