JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

  <body>

    <h2>Form</h2>

    <form redirect="/retreat/registration-confirmation">

      <input type="text" name="First-Name" placeholder="First Name*" id="First-Name" required="">
      <input type="text" name="Last-Name" placeholder="Last Name*" id="Last-Name" required="">
      <input type="email" name="Email" data-name="Email" placeholder="Email*" id="Email" required="">
      <div style="margin-top:20px;">
        Additional Attendees?
        <div>
          <select id="Additional-Attendees" name="Additional-Attendees" required="">
            <option value="No">No</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
          </select>
        </div>
        <div class="additional-attendees a1" style="display: none;">
          <div>Attendee 1 Info:</div>
          <input type="text" name="A1-First-Name" placeholder="First Name*" id="A1-First-Name" required="" class="required-item">
          <input type="text" name="A1-Last-Name" placeholder="Last Name*" id="A1-Last-Name" required="" class="required-item">
          <input type="email" name="A1-Email" data-name="Email" placeholder="Email*" id="A1-Email" required="" class="required-item">
          <label><input type="checkbox" name="A1-Vegetarian" id="A1-Vegetarian" data-name="A1 Vegetarian" class="check"><span class="check-label" for="A1-Vegetarian">Vegetarian</span></label>
        </div>

        <div class="additional-attendees a2" style="display: none;">
          <div>Attendee 2 Info:</div>
          <input type="text" name="A2-First-Name" placeholder="First Name*" id="A2-First-Name" required="" class="required-item">
          <input type="text" name="A2-Last-Name" placeholder="Last Name*" id="A2-Last-Name" required="" class="required-item">
          <input type="email" name="A2-Email" data-name="Email"...

CSS

.additional-attendees {
  padding-top: 20px;
}

.button {
  margin-top: 20px;
  margin-bottom: 20px;
}

JavaScript

$('.required-item').prop('required', function() {
  return $(this).is(':visible');
});

$('#Additional-Attendees').on('change', function() {
  if (this.value == 'No') {
    $(".a1").hide();
    $(".a2").hide();
    $(".a3").hide();
    $(".a4").hide();
    $(".a5").hide();

    $('.a1 input[type="text"]').val('');
    $('.a1 input[type="email"]').val('');
    $('.a1 input[type="checkbox"]:checked').prop('checked', false).trigger('change');

    $('.a2 input[type="text"]').val('');
    $('.a2 input[type="email"]').val('');
    $('.a2 input[type="checkbox"]:checked').prop('checked', false).trigger('change');

    $('.a3 input[type="text"]').val('');
    $('.a3 input[type="email"]').val('');
    $('.a3 input[type="checkbox"]:checked').prop('checked', false).trigger('change');

    $('.a4 input[type="text"]').val('');
    $('.a4 input[type="email"]').val('');
    $('.a4 input[type="checkbox"]:checked').prop('checked', false).trigger('change');

    $('.a5 input[type="text"]').val('');
    $('.a5 input[type="email"]').val('');
    $('.a5 input[type="checkbox"]:checked').prop('checked', false).trigger('change');
  }
  if (this.value == '1') {
    $(".a1").show();
    $(".a2").hide();
    $(".a3").hide();
    $(".a4").hide();
    $(".a5").hide();

    $('.a2 input[type="text"]').val('');
    $('.a2 input[type="email"]').val('');
    $('.a2 input[type="checkbox"]:checked').prop('checked', false).trigger('change');

    $('.a3 input[type="text"]').val('');
    $('.a3 input[type="email"]').val('');
    $('.a3 input[type="checkbox"]:checked').prop('checked', false).trigger('change');

    $('.a4 input[type="text"]').val('');
    $('.a4 input[type="email"]').val('');
    $('.a4 input[type="checkbox"]:checked').prop('checked', false).trigger('change');

    $('.a5 input[type="text"]').val('');
    $('.a5 input[type="email"]').val('');
    $('.a5 input[type="checkbox"]:checked').prop('checked', false).trigger('change');
  }
  if (this.value == '2') {
    $(".a1").show();
   ...