Why won't this custom modal work on my WordPress site header?

If I place a custom HTML block in the header and place my code in, the button appears but the functionality of the button doesn’t work. If I place the custom HTML in a block anywhere else on the page, it functions perfectly fine. Only when I place it in the header does it break.

Normally it wouldn’t be an issue and I would place it somewhere on the page, but the client wants it in the Header.

Here is a link to the website: https://canastaging.wpengine.com/

Here is my code:

<!-- Booking Button-->
<button id="bookingBtn" class="book-button">
    Book Now
</button>
<!-- Booking Modal-->
<div id="bookingModal" class="modal" style="display: none;" role="dialog" aria-labelledby="modal-title" aria-hidden="true">
    <div class="modal-content" tabindex="0">
        <h2 id="modal-title" class="modal-title">
            Come Stay with Us!
        </h2>
        <span class="close" aria-label="Close" role="button" tabindex="0">
            ×
        </span>
        <!-- Booking Form-->
        <div class="form-group">
            <label for="checkin-date">
                Check-in Date:
            </label>
            <input type="date" id="checkin-date">
        </div>
        <div class="form-group">
            <label for="checkout-date">
                Check-out Date:
            </label>
            <input type="date" id="checkout-date">
        </div>
        <div class="form-group">
            <label for="guests">
                Number of Guests:
            </label>
            <input type="number" id="guests" min="1">
        </div>
        <div class="form-group">
            <label for="rooms">
                Number of Rooms:
            </label>
            <input type="number" id="rooms" min="1">
        </div>
        <button class="submit-button" onclick="redirectToBooking()">
            Check Avalibility
        </button>
    </div>
</div>

<script>
  var modal = document.getElementById("bookingModal");
  var btn = document.getElementById("bookingBtn");
  var span = document.getElementsByClassName("close")[0];

  btn.onclick = function () {
    modal.style.display = "block";
  };

  span.onclick = function () {
    modal.style.display = "none";
  };

  window.onclick = function (event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  };

  function redirectToBooking() {
    var checkinDate = document.getElementById("checkin-date").value;
    var checkoutDate = document.getElementById("checkout-date").value;
    var guests = document.getElementById("guests").value;
    var rooms = document.getElementById("rooms").value;

     var redirectUrl =
      "https://www.hilton.com/en/book/reservation/rooms/? 
   ctyhocn=ROCUSUP&" +
       "arrivalDate=" +
      checkinDate +
      "&departureDate=" +
      checkoutDate +
      "&room" +
      rooms +
     "NumAdults=" +
      guests;

    window.location.href = redirectUrl;
  }

  var focusableEls = modal.querySelectorAll(
    'button, [href], input, select, textarea, 
[tabindex]:not([tabindex="-1"])'
  );
  var firstFocusableEl = focusableEls[0];
  var lastFocusableEl = focusableEls[focusableEls.length - 1];

  
      modal.addEventListener("keydown", function (e) {
        if (e.key === "Tab" || e.keyCode === 9) {
          if (e.shiftKey) {
             if (document.activeElement === 
    firstFocusableEl) {
              lastFocusableEl.focus();
              e.preventDefault();
            }
           }  else {
            if (document.activeElement === lastFocusableEl) {
              firstFocusableEl.focus();
              e.preventDefault();
            }
          }
        }
      });
    </script>
<style>
.modal {
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 z-index: 1000;
 background-color: rgba(0, 0, 0, 0.6); 
 width: 100%;
 height: 100%;
}

 .modal-content {
  position: relative; /* Set this to make sure modal content is 
 relative inside modal */
  background-color: #ffffff;
  padding: 30px;
  border-radius: 15px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.25);
  margin: 0 auto; /* This will help in horizontal centering */
}

.modal-title {
  font-size: 24px;
  margin-bottom: 25px;
  color: #333;
}

.form-group {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.form-group label {
  margin-bottom: 8px;
  color: #555;
}

.form-group input {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ddd;
}

 /* Booking Button */
.book-button {

   color: #FFF9EB;
   border:  2px solid;
   padding: 12px 40px;
   font-family: "frieghttext-pro-bold";
   cursor: pointer;
   font-size: 16px;
   box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}

.book-button:hover {
  background-color: #555;
}

/* The Close Button */
.close {
   color: #aaa;
   position: absolute;
   top: 15px;
   right: 15px;
   font-size: 30px;
  cursor: pointer;
 }

.close:hover {
  color: #333;
 }

/* Submit Button */
 .submit-button {

  color: #20433D;
  border: 1px solid;
  padding: 12px 10px;

  cursor: pointer;
  font-size: 16px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  } 

 .submit-button:hover {
   background-color: #555;
}

 /* Mobile Responsiveness */
 @media (max-width: 768px) {
   .modal-content {
     padding: 20px;
   }

   .modal-title {
     font-size: 20px;
   }

   .book-button,
   .submit-button {
     padding: 10px 20px;
   }
 }
 </style>

I’ve tried applying inline styling and using !important tags to force the styling. I’m wondering if there is some JS that is overriding my JS functionality. I can’t trace it as the console doesn’t give me any direct errors when interacting with the button.