How to solve the problem of querySelector only selecting the first element?

Question

I'm trying to make a calendar where when I click on one of the dates a form pops up that you have to fill out. I can't get it to work. The only time I got to work was on the first "1" date. Everything else doesn't work and I don't know how to fix it. I tried rewriting the code and switching to id but nothing worked. Any help is appreciated. Thanks!

document.querySelector(".weekdays").addEventListener("click",
  function() {
    document.querySelector(".bg-modal").style.display = "flex";
  });

.bg-modal {
  width: 100%;
  background-color: rgba(0, 0, 0, .7);
  height: 100vh;
  position: fixed;
  z-index: 20;
  display: none;
}

.modal-content {
  width: 30%;
  height: 50%;
  position: absolute;
  top: 50%;
  border-radius: 30px;
  background: linear-gradient(to bottom, #2ad6ff, #0069ff);
}

.modal-heading {
  width: 70%;
  height: 50px;
  position: absolute;
  border-radius: 50px;
  background-color: #2ad6ff;
  left: 50%;
  transform: translate(-50%);
  top: -6%;
  font-size: 32px;
  text-align: center;
  color: white;
}

.modal-close {
  position: absolute;
  transform: rotate(45deg);
  font-size: 42px;
  color: white;
  top: -1%;
  left: 95%;
  ;
  cursor: pointer;
  height: 10%;
}

.modal-input {
  height: 70%;
  border: none;
  outline: none;
  border-radius: 20px;
  padding-left: 15px;
  font-size: 15px;
  margin-right: 32px;
}

.modal-textarea {
  margin: 20px;
  height: 150px;
  border-radius: 20px;
  border: none;
  resize: none;
  font-size: 15px;
  padding-left: 3%;
  padding-top: 2%;
}

.modal-submit {
  width: 30%;
  position: absolute;
  left: 47%;
  top: 85%;
  transform: translateX(-50%);
  background-color: white;
  outline: none;
  border: none;
  font-size: 30px;
  border-radius: 20px;
  color: black;
}

.modal-submit:active {
  top: 86%;
}

.modal-form {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
}

.calander {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-items: stretch;
  align-items: stretch;
  width: 40%;
  height: 50%;
  font-size: 32px;
  text-align: center;
  left: 50%;
  position: absolute;
  transform: translate(-50%);
}

.weekend {
  font-size: 45px;
}

.weekdays {
  font-weight: 200;
  transition: .5s;
  background: none;
  border: none;
  font-size: 40px;
}

.weekdays:hover {
  transform: scale(1.3);
  transition: .5s;
}

<div class="bg-modal">
  <div class="modal-content center">
    <div class="modal-heading">Complete the form below</div>
    <form class="modal-form" action="">
      <input class="modal-input" type="text" placeholder="Name">
      <input class="modal-input" type="text" placeholder="Email">
      <input class="modal-input" type="text" placeholder="Phone Number">
      <input class="modal-input" type="text" placeholder="Company Name">
      <textarea class="modal-textarea" placeholder="What can we help you with?"></textarea>
      <input class="modal-submit" type="submit">
    </form>
    <div class="modal-close">+</div>
  </div>
</div>


<div class="calander">
  <div class="weekend">S</div>
  <div class="weekend">M</div>
  <div class="weekend">T</div>
  <div class="weekend">W</div>
  <div class="weekend">T</div>
  <div class="weekend">F</div>
  <div class="weekend">S</div>
  <div></div>
  <div></div>
  <button type="button" class="weekdays"><div class="weekdays">1</div></button>
  <button type="button" class="weekdays"><div class="weekdays">2</div></button>
  <button type="button" class="weekdays"><div class="weekdays">2</div></button>
  <button type="button" class="weekdays"><div class="weekdays">3</div></button>
  <button type="button" class="weekdays"><div class="weekdays">4</div></button>
  <button type="button" class="weekdays"><div class="weekdays">5</div></button>
  <button type="button" class="weekdays"><div class="weekdays">6</div></button>
  <button type="button" class="weekdays"><div class="weekdays">7</div></button>
  <button type="button" class="weekdays"><div class="weekdays">8</div></button>
  <button type="button" class="weekdays"><div class="weekdays">9</div></button>
  <button type="button" class="weekdays"><div class="weekdays">10</div></button>
  <button type="button" class="weekdays"><div class="weekdays">11</div></button>
  <button type="button" class="weekdays"><div class="weekdays">12</div></button>
  <button type="button" class="weekdays"><div class="weekdays">13</div></button>
  <button type="button" class="weekdays"><div class="weekdays">14</div></button>
  <button type="button" class="weekdays"><div class="weekdays">15</div></button>
  <button type="button" class="weekdays"><div class="weekdays">16</div></button>
  <button type="button" class="weekdays"><div class="weekdays">17</div></button>
  <button type="button" class="weekdays"><div class="weekdays">18</div></button>
  <button type="button" class="weekdays"><div class="weekdays">19</div></button>
  <button type="button" class="weekdays"><div class="weekdays">20</div></button>
  <button type="button" class="weekdays"><div class="weekdays">21</div></button>
  <button type="button" class="weekdays"><div class="weekdays">22</div></button>
  <button type="button" class="weekdays"><div class="weekdays">23</div></button>
  <button type="button" class="weekdays"><div class="weekdays">24</div></button>
  <button type="button" class="weekdays"><div class="weekdays">25</div></button>
  <button type="button" class="weekdays"><div class="weekdays">26</div></button>
  <button type="button" class="weekdays"><div class="weekdays">27</div></button>
  <button type="button" class="weekdays"><div class="weekdays">28</div></button>
  <button type="button" class="weekdays"><div class="weekdays">29</div></button>
  <button type="button" class="weekdays"><div class="weekdays">30</div></button>
  <button type="button" class="weekdays"><div class="weekdays">31</div></button>

</div>

https://codepen.io/pokyparachute66/pen/vPyrEv

Answer 1

Using querySelectorAll and forEach:

document.querySelectorAll('.weekdays').forEach(e => e.addEventListener('click', listener)):

querySelector returns only the first matching element, querySelectorAll returns all matching elements.

Answer 2

Use querySelectorAll Instead, it returns a list of nodes. Then you have to iterate and attach event handlers.

document.querySelectorAll(".weekdays").forEach(elem => elem.addEventListener("click",
 () => {
    document.querySelector(".bg-modal").style.display = "flex";
  }));