Javascript 如何将类列表切换应用到具有相同类的多个按钮

const flipButtons = document.querySelectorAll(".reserve");
flipButtons.forEach(button => {
  button.addEventListener('click', e => {
    e.target.classList.toggle("flip")
  })
});

// this is another version of the above as a one-liner
// flipButtons.forEach(button => button.addEventListener('click', e => e.target.classList.toggle("flip")));

.button {
  position: relative;
  transition: all .5s linear;
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
}

.button::after {
  content: 'X';
  transform: rotateY(180deg);
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  background-color: #f00;
}

.flip {
  transform: rotateY(180deg);
}

<button class="button reserve" role="button"><i class="bx bx-bell icon"></i>Reserveer</button>
<button class="button reserve" role="button"><i class="bx bx-bell icon"></i>Reserveer</button>
<button class="button reserve" role="button"><i class="bx bx-bell icon"></i>Reserveer</button>
<button class="button reserve" role="button"><i class="bx bx-bell icon"></i>Reserveer</button>