Making elements unaccessible by date (for an advent calendar)

I've recently been working on an advent calendar with vanilla JS and without jquery or using grid (like all of the examples I've seen online). I can't seem to get the doors to open based on the date. I think the js code is more or less right, but I'm missing the variable that actually gives each of the html elements (doors) a date to check against in the JS file. So my question is, what am I missing? Does adding a "day" class in the html work? I haven't found a sample at all with just vanilla JS, so I'm pretty lost.

I've made a very simple codepen with four door elements that have varying dates. The actual project has 25 doors and they are all placed randomly on the backdrop. They also aren't using an alert, but for the sake of showing something, i've changed it to alerts!

I apologize if it's sloppy or hard to read; I'm still quite new to this.

If you need any clarification please let me know in the comments!

Thank you!

Codepen: https://codepen.io/LovelyAndy/pen/MWebWKy

let d = new Date()
let todaysDate = d.getDate()
const chirstmas = new Date('2020-12-25')
const day = document.querySelectorAll('.day')
const doors = document.querySelectorAll('.door')
const doorBackArray = document.querySelectorAll('.door-back')

doors.forEach((door) => {
  if (todaysDate >= day) {
    door.addEventListener('click', () => {
      door.classList.add('doorOpen')
    })
  } else if (todaysDate < day) {
    door.addEventListener('click', function() {
      alert("Not so fast! Come back on the day for the surprise!");
    })
  } else {
    door.addEventListener('click', function() {
      alert("It's Christmas baby!");
    })
  }
})

.door-position {
  position: absolute;
}

.door-back {
  position: relative;
  height: 65px;
  width: 65px;
  background-image: url('https://preview.redd.it/npq2ab6aepd51.jpg?auto=webp&s=2d44bf582509451d41f9e8add54775e9fb4478fb');
  border-radius: 50px;
  background-size: cover;
}

.door {
  position: absolute;
  height: 65px;
  width: 65px;
  font-family: 'Mountains of Christmas', cursive;
  font-size: 1.5em;
  color: white;
  border: 2px solid teal;
  border-radius: 50px;
  background: indianred;
  cursor: pointer;
  transform-origin: left;
  transition: all 0.5s ease-in-out;
}

.doorOpen {
  transform: perspective(1200px) translateZ(0px) translateX(0px) translateY(0px) rotateY(-150deg);
}

.d1 {
  top: 100px;
  left: 60px;
}

.d10 {
  top: 100px;
  left: 400px;
}

.d20 {
  top: 100px;
  left: 600px;
}

.d25 {
  top: 100px;
  left: 800px;
}

<div class="calendar-main">
  <div class="door-position d1">
    <div class="door-back">
      <button class="door day">1</button>
    </div>
  </div>
  <div class="door-position d10">
    <div class="door-back">
      <button class="door day">10</button>
    </div>
  </div>
  <div class="door-position d20">
    <div class="door-back">
      <button class="door day">20</button>
    </div>
  </div>
  <div class="door-position d25">
    <div class="door-back">
      <button class="door day">25</button>
    </div>

  </div>