JSFiddle - React, Tailwind, and code Playground

HTML

<div class="participant">
  <label for="first_name[0]"> Name: </label>
  <input type="text" name="first_name[0]" value>
</div>
<div class="participant">
  <label for="first_name[0]"> Name: </label>
  <input type="text" name="first_name[0]" value>
</div>
<div class="participant">
  <label for="first_name[0]"> Name: </label>
  <input type="text" name="first_name[0]" value>
</div>
<div class="participant">
  <label for="first_name[0]"> Name: </label>
  <input type="text" name="first_name[0]" value>
</div>
<div class="participant">
  <label for="first_name[0]"> Name: </label>
  <input type="text" name="first_name[0]" value>
</div>
<button id="add-participant">
  Add Another
</button>

CSS

.hidden {
  display:none;
}

JavaScript

$(".participant:gt(1)").addClass("hidden");
$("#add-participant").on("click", function() {
	$(".participant.hidden").first().removeClass("hidden");
  if(!$(".participant.hidden").length) {
  	$(this).hide();
  }
});