Проблема с кнопкой в form при переходе из неактивного в активное состояние и наоборот

document.addEventListener('DOMContentLoaded', function() {
  // Получаем элементы формы
  const firstName = document.getElementById('dataOrderFirstName');
  const lastName = document.getElementById('dataOrderLastName');
  const phone = document.getElementById('dataOrderPhone');
  const email = document.getElementById('dataOrderMail');
  const accasionSelect = document.getElementById('dataOrderAccasion');
  const accasionOptional = document.getElementById('accasionInputOptional');
  const radioOne = document.getElementById('termOneBoxForm');
  const radioTwo = document.getElementById('termOneBoxTwo');
  const radioThree = document.getElementById('termOneBoxThree');
  const confirmButton = document.getElementById('buttonConfirmReservationInForm');

  // Проверка на заполнение всех обязательных полей
  function checkFormValidity() {
    const isFirstNameFilled = firstName.value.trim() !== '';
    const isLastNameFilled = lastName.value.trim() !== '';
    const isPhoneFilled = phone.value.trim() !== '';
    const isEmailFilled = email.value.trim() !== '';
    const isAccasionSelected = accasionSelect.value !== 'valueNotGivenPopreserv'; // Проверяем, чтобы не было выбрано значение "None"
    const isRadioSelected = radioOne.checked || radioTwo.checked || radioThree.checked;

    // Проверка всех полей на заполнение
    if (isFirstNameFilled && isLastNameFilled && isPhoneFilled && isEmailFilled && isAccasionSelected && isRadioSelected) {
      confirmButton.disabled = false; // Активируем кнопку
    } else {
      confirmButton.disabled = true; // Деактивируем кнопку
    }
  }

  // Навешиваем события для проверки ввода данных в полях
  firstName.addEventListener('input', checkFormValidity);
  lastName.addEventListener('input', checkFormValidity);
  phone.addEventListener('input', checkFormValidity);
  email.addEventListener('input', checkFormValidity);

  // Отслеживание изменений в select (раскрывающий список)
  accasionSelect.addEventListener('change', function() {
    accasionOptional.value = accasionSelect.value; // Обновляем значение кастомного поля

    // Если выбрано значение "None", сразу делаем кнопку неактивной
    if (accasionSelect.value === 'valueNotGivenPopreserv') {
      confirmButton.disabled = true; // Деактивируем кнопку
    } else {

      // Проверяем остальные поля на валидность
      checkFormValidity();
    }
  });

  // Проверка изменения радиокнопок
  radioOne.addEventListener('change', checkFormValidity);
  radioTwo.addEventListener('change', checkFormValidity);
  radioThree.addEventListener('change', checkFormValidity);

  // Делаем кнопку неактивной при загрузке страницы
  confirmButton.disabled = true;

  // Дополнительно проверим форму сразу при загрузке страницы
  checkFormValidity();
});

<div class="reservation-block__order-form-wrap">
  <h2 class="reservation-block__caption-order-fr">Data order</h2>
  <form id="formReservation" class="reservation-block__data-order data-order" action="#" method="GET" enctype="multipart/form-data">

    <div class="data-order__inputs-box">
      <div class="data-order__box-input">
        <input id="dataOrderFirstName" type="text" class="data-order__input-field" name="first-name-data-order" placeholder="First name" required autocomplete="off">
      </div>
      <div class="data-order__box-input">
        <input id="dataOrderLastName" type="text" class="data-order__input-field" name="last-name-data-order" placeholder="Last name" required autocomplete="off">
      </div>
      <div class="data-order__box-input">
        <input id="dataOrderPhone" type="tel" pattern="\+?[0-9\s\-\(\)]+" class="data-order__input-field" name="phone-data-order" required placeholder="Phone number">
      </div>
      <div class="data-order__box-input">
        <input id="dataOrderMail" type="email" class="data-order__input-field" name="mail__data-order" placeholder="Email address" required autocomplete="off">
      </div>

      <div class="data-order__box-input data-order__box-input--accasion">

        <input id="accasionInputOptional" type="text" class="data-order__label-input data-order__label-input--mark" placeholder="Select an accasion (optional)" required autocomplete="off" readonly>

        <div id="dataOrderListAccasion" class="data-order__set-elements">

          <select id="dataOrderAccasion" class="data-order__box-accasion data-order__box-accasion--category-name" name="accasion__category" style="display: none;">

            <option id="valueNotGivenPopreserv" value="none-value" class="data-order__none-option">None</option>
            <option value="birthday" class="data-order__option">Birthday</option>
            <option value="anniversary" class="data-order__option">Anniversary</option>
            <option value="corporate" class="data-order__option">Corporate</option>
            <option value="themed_party" class="data-order__option">Themed party</option>
            <option value="wedding" class="data-order__option">Wedding</option>
            <option value="charity_event" class="data-order__option">Charity event</option>
            <option value="conference" class="data-order__option">Conference</option>
            <option value="business_meeting" class="data-order__option">Business meeting</option>
            <option value="networking" class="data-order__option">Networking</option>
          </select>

          <!-- Создаем кастомный ul, который будет заменять select -->
          <ul id="accasionFantomList" class="data-order__list">
            <!-- Элементы будут добавлены через JavaScript -->
          </ul>
        </div>
      </div>

      <div class="data-order__box-input">
        <input id="DataOrderSpecialRequest" type="text" class="data-order__input-field" name="special-request-data-order" placeholder="Add a special request" autocomplete="off">
      </div>

    </div>

    <div class="data-order__box-form box-form">
      <div class="box-form__column">
        <div id="boxFormRadioBtn" class="box-form__radio-btn">
          <!-- * Radio-btn #1 -->
          <div class="box-form__inner-radio">
            <input id="termOneBoxForm" type="radio" class="box-form__radio-input" value="radio-term-one" name="radio-terms" required>
            <label for="termOneBoxForm" class="box-form__label-radio">I agree with what is stated above</label>
          </div>
          <!-- * Radio-btn #2 -->
          <div class="box-form__inner-radio">
            <input id="termOneBoxTwo" type="radio" class="box-form__radio-input" value="radio-term-two" name="radio-terms" required>
            <label for="termOneBoxTwo" class="box-form__label-radio">Sign me up to receive dining offers and news from this restaurant by email.</label>
          </div>
          <!-- * Radio-btn #3 -->
          <div class="box-form__inner-radio">
            <input id="termOneBoxThree" type="radio" class="box-form__radio-input" value="radio-term-three" name="radio-terms" required>
            <label for="termOneBoxThree" class="box-form__label-radio">Sign me up to receive dining offers and news from this restaurant by email.</label>
          </div>
        </div>

        <button id="buttonConfirmReservationInForm" type="button" class="box-form__confirm-button" data-popup="#confirmation" data-da=".data-order__box-form,767">Confirm reservation</button>
      </div>

      <article class="box-form__column">
        <h2 class="box-form__subcaption">
          Restaurant informations
        </h2>
        <div class="box-form__paragraph">
          <p>
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
          </p>
          <p>
            Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam.
          </p>
        </div>
      </article>
    </div>

  </form>
</div>