[NastyaVs]

Приветствую. При реализации кода на Java Script возникла проблема с кнопкой в форме, которая не корректно переходит из неактивного в активное состояние и наоборот при заполнении/корректировки обязательных полей, а именно поля Select an accasion (optional).
Блок с формой имеет следующую структуру в HTML

<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>