如何让4组3个按钮同时保持点击状态？

<div class="button-group">
  <button id="btn1">按钮1</button>
  <button id="btn2">按钮2</button>
  <button id="btn3">按钮3</button>
</div>

<div class="button-group">
  <button id="btn4">按钮4</button>
  <button id="btn5">按钮5</button>
  <button id="btn6">按钮6</button>
</div>

<div class="button-group">
  <button id="btn7">按钮7</button>
  <button id="btn8">按钮8</button>
  <button id="btn9">按钮9</button>
</div>

<div class="button-group">
  <button id="btn10">按钮10</button>
  <button id="btn11">按钮11</button>
  <button id="btn12">按钮12</button>
</div>

.button-group button:active,
.button-group button.active {
  background-color: #ff0000; /* 设置点击状态的背景颜色 */
  color: #ffffff; /* 设置点击状态的文本颜色 */
}

// 获取所有按钮元素
const buttons = document.querySelectorAll('.button-group button');

// 为每个按钮添加点击事件监听器
buttons.forEach(button => {
  button.addEventListener('click', () => {
    // 切换按钮的点击状态
    button.classList.toggle('active');
  });
});