Javascript 在同一页面上使用多个选项卡组件

我正试图实现标签的功能，但我被一些东西卡住了。我希望对多个选项卡使用相同的功能，但如果在同一页面中有多个选项卡组件，则不会相互干扰。你对我如何做到这一点有什么想法吗？非常感谢。到目前为止，我只是设法避免W3schools示例中的内联javascript，但它只适用于一个组件

<div class="first-tab-component>
 <div class="tab">
  <button class="tablinks" data-id="1">London</button>
  <button class="tablinks" data-id="2">Paris</button>
  <button class="tablinks" data-id="3">Tokyo</button>
</div>

<div data-id="1" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div data-id="2" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>

<div data-id="3" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>
</div>

<div class="second-tab-component>
 <div class="tab">
  <button class="tablinks" data-id="1">London</button>
  <button class="tablinks" data-id="2">Paris</button>
  <button class="tablinks" data-id="3">Tokyo</button>
</div>

<div data-id="1" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div data-id="2" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>

<div data-id="3" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>
</div>


let handleClick = e => {
  Array.from(document.querySelectorAll(".active"), e => e.classList.remove("active")); // remove `active` class from every elements which contains him.
  e.target.classList.add("active");
  document.querySelector(`div.tabcontent[data-id*="${e.target.dataset.id}"]`).classList.add("active");
};

Array.from(document.getElementsByClassName("tablinks"), btn => btn.addEventListener('click', handleClick, false));

伦敦
巴黎
东京
伦敦
伦敦是英国的首都

巴黎
巴黎是法国的首都

东京
东京是日本的首都

让handleClick=e=>{
Array.from（document.queryselectoral（.active）），e=>e.classList.remove（“active”）；//从包含它的每个元素中删除'active'类。
e、 target.classList.add（“活动”）；
document.querySelector（`div.tabcontent[data id*=“${e.target.dataset.id}]”`）；
};
from（document.getElementsByClassName（“tablinks”），btn=>btn.addEventListener（'click'，handleClick，false））；

这里我有一个例子

您可以替换：

Array.from(document.querySelectorAll(".active"), e => e.classList.remove("active")); // remove `active` class from every elements which contains him.

与

这将仅从其父选项卡组件中删除.active类

Array.from(e.target.parentElement.parentElement.querySelectorAll(".active"), e => e.classList.remove("active"))