如何在同一页面上使用具有相同ID的多个(动态)切换按钮？

<button class="toggle-btn">按钮1</button>
<button class="toggle-btn">按钮2</button>
<button class="toggle-btn">按钮3</button>

<div id="content1" class="toggle-content">内容1</div>
<div id="content2" class="toggle-content">内容2</div>
<div id="content3" class="toggle-content">内容3</div>

.toggle-content {
  display: none;
}

.show {
  display: block;
}

// 获取所有切换按钮
var toggleBtns = document.getElementsByClassName('toggle-btn');

// 给每个按钮添加点击事件监听器
for (var i = 0; i < toggleBtns.length; i++) {
  toggleBtns[i].addEventListener('click', function() {
    // 获取按钮的索引
    var index = Array.prototype.indexOf.call(toggleBtns, this);

    // 获取对应的内容元素
    var content = document.getElementById('content' + (index + 1));

    // 切换内容的显示状态
    if (content.style.display === 'none') {
      content.style.display = 'block';
    } else {
      content.style.display = 'none';
    }
  });
}