[Vaska]

Приветствую!
На странице есть табы, которые размещены группами по 2 таба в группе.
Есть код JS, который который хорошо работает, если на странице одна группа табов.
А если добавить вторую и третью группу табов, то действия в одной из групп табов влияют на другие группы табов.
Сейчас, если кликнуть по одному табу первой группе, то табы переключаются во второй и в третьей группе. Так быть не должно.
Помогите исправить, чтобы каждый таб переключался независимо друг от друга.

<style>
[data-tab-content] {
  display: none;
}

.active[data-tab-content] {
  display: block;
}

body {
  padding: 0;
  margin: 0;
}

.tabs {
  display: flex;
  justify-content: space-around;
  list-style-type: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid black;
}

.tab {
  cursor: pointer;
  padding: 10px;
}

.tab.active {
  background-color: #CCC;
}

.tab:hover {
  background-color: #AAA;
}

.tab-content {
  margin-left: 20px;
  margin-right: 20px;
}
</style>

<ul class="tabs">
  <li data-tab-target="#home1" class="active tab">Home</li>
  <li data-tab-target="#pricing1" class="tab">Pricing</li>
</ul>

<div class="tab-content">
  <div id="home1" data-tab-content class="active">
    <h1>Home 1</h1>
    <p>This is the home 1</p>
  </div>
  <div id="pricing1" data-tab-content>
    <h1>Pricing 1</h1>
    <p>Some information on pricing 1</p>
  </div>
</div>


<ul class="tabs">
  <li data-tab-target="#home2" class="active tab">Home</li>
  <li data-tab-target="#pricing2" class="tab">Pricing</li>
</ul>

<div class="tab-content">
  <div id="home2" data-tab-content class="active">
    <h1>Home 2</h1>
    <p>This is the home 2</p>
  </div>
  <div id="pricing2" data-tab-content>
    <h1>Pricing 2</h1>
    <p>Some information on pricing 2</p>
  </div>
</div>


<ul class="tabs">
  <li data-tab-target="#home3" class="active tab">Home</li>
  <li data-tab-target="#pricing3" class="tab">Pricing</li>
</ul>

<div class="tab-content">
  <div id="home3" data-tab-content class="active">
    <h1>Home 3</h1>
    <p>This is the home 3</p>
  </div>
  <div id="pricing3" data-tab-content>
    <h1>Pricing 3</h1>
    <p>Some information on pricing 3</p>
  </div>
</div>

<script>
const tabs = document.querySelectorAll('[data-tab-target]')
const tabContents = document.querySelectorAll('[data-tab-content]')

tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    const target = document.querySelector(tab.dataset.tabTarget)
    tabContents.forEach(tabContent => {
      tabContent.classList.remove('active')
    })
    tabs.forEach(tab => {
      tab.classList.remove('active')
    })
    tab.classList.add('active')
    target.classList.add('active')
  })
})
</script>

Или подскажите другой скрипт, который умеет делать то, что я выше написал.
Заранее, спасибо!