JSFiddle - React, Tailwind, and code Playground

by mmilleruva

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 id="btn" class="add" type="button">Add Deployment</button> <span id="remaining">2</span> remaining</div>

JavaScript

var remaining = 2;

  function UpdateRemaining(isAdd) {
      if (isAdd) {
          remaining = remaining - 1;
      } else {
          remaining = remaining + 1;
      }

      $('#remaining').text(remaining);
      if (remaining == 0) {
          $('#btn').prop("disabled", true);
      } else {
          $('#btn').prop("disabled", false);
      }
  }

  $('.add').click(function () {
      $(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>');

      UpdateRemaining(true);
  });

  $(document).on('click', '.remove', function () {
      $(this).parent('div').remove();
      UpdateRemaining(false);
  });