JSFiddle - React, Tailwind, and code Playground

HTML

<div>Location deployed:
    <input type="text" size="15" placeholder="Location deployed">&nbsp;Date deployed:
    <input type="text" size="15" placeholder="Date deployed">&nbsp;Date returned:
    <input type="text" size="15" placeholder="Date returned">
</div>
<div id="counter">
    <button class="add" type="button">Add Deployment</button> <span id="remaining">2</span> remaining
</div>

JavaScript

$('.add').click(function () {
      var $remind = parseInt($('#remaining').text());
      if($remind != 0){
      $(this).before('<div>Location deployed: <input type="text" placeholder="Location deployed" size="15" > Date deployed: <input type="text" placeholder="Date deployed" size="15" > Date returned: <input type="text" placeholder="Date returned" size="15" >&nbsp;<span class="remove"><button type="button"> Remove </button> </span></div>');
          $remind = $remind - 1
          $('#remaining').text($remind);
         
      }
      else{
      console.log('All added');
          $('.add').prop('disabled', true);
      }
  });

  $(document).on('click', '.remove', function () {
      $(this).parent('div').remove();
      var $remind = parseInt($('#remaining').text());
      $remind = $remind + 1
          $('#remaining').text($remind);
      if$('.add').prop('disabled', false);

  });