当一颗星星被点击时，如何关闭其他星星的闪烁颜色/动画？

<div class="star" id="star1"></div>
<div class="star" id="star2"></div>
<div class="star" id="star3"></div>
<div class="star" id="star4"></div>
<div class="star" id="star5"></div>

.star {
  width: 50px;
  height: 50px;
  background-color: yellow;
  animation: blink 1s infinite;
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.star.clicked {
  animation: none;
  background-color: red;
}

const stars = document.querySelectorAll('.star');

stars.forEach(star => {
  star.addEventListener('click', () => {
    stars.forEach(s => {
      if (s.id === star.id) {
        s.classList.add('clicked');
      } else {
        s.classList.remove('clicked');
      }
    });
  });
});