如何让一个按钮在多个卡片容器上使用，一次只影响一个容器？

<div class="card" id="card1">
  <h3>Card 1</h3>
  <button class="btn">按钮</button>
</div>

<div class="card" id="card2">
  <h3>Card 2</h3>
  <button class="btn">按钮</button>
</div>

<div class="card" id="card3">
  <h3>Card 3</h3>
  <button class="btn">按钮</button>
</div>

// 获取所有按钮元素
var buttons = document.querySelectorAll('.btn');

// 为每个按钮添加事件监听器
buttons.forEach(function(button) {
  button.addEventListener('click', function() {
    // 获取当前按钮所在的卡片容器
    var card = button.parentNode;

    // 重置所有卡片容器的样式
    var cards = document.querySelectorAll('.card');
    cards.forEach(function(card) {
      card.classList.remove('active');
    });

    // 添加当前卡片容器的样式
    card.classList.add('active');
  });
});

.card {
  border: 1px solid #ccc;
  padding: 10px;
}

.card.active {
  background-color: yellow;
}