Всем привет.
На странице есть табы в двух местах. Классы именовал по БЭМ что бы собственно продублировать блок на странице. Сейчас js написан только под одну группу табов. После добавление второй, как и ожидалось, обе группы реагируют на клики и на странице происходит полный бардак.
Подскажите пожалуйста что надо поправить или добавить в коде, что бы обе группы табов работали по отдельности?
Спасибо
Группа 1
<div class="projects__tabs">
<button class="tab projects__tab" data-tab="#store">МАГАЗИНЫ</button>
<button class="tab projects__tab" data-tab="#office">ОФИСЫ</button>
<button class="tab projects__tab" data-tab="#private-house">ЧАСТНЫЕ ДОМА</button>
<button class="tab projects__tab" data-tab="#warehouse">СКЛАДЫ</button>
<button class="tab projects__tab" data-tab="#car-wash">АВТОМОЙКИ</button>
<button class="tab projects__tab" data-tab="#skud">СКУД</button>
<button class="tab projects__tab" data-tab="#doorphones">ДОМОФОНЫ</button>
<button class="tab projects__tab" data-tab="#alarm">СИГНАЛИЗАЦИИ</button>
</div>
<div class="projects__content">
<div class="projects__container" id="store"></div>
<div class="projects__container" id="office"></div>
<div class="projects__container" id="private-house"></div>
<div class="projects__container" id="warehouse"></div>
<div class="projects__container" id="car-wash"></div>
<div class="projects__container" id="skud"></div>
<div class="projects__container" id="doorphones"></div>
<div class="projects__container" id="alarm"></div>
</div>
Группа 2
<div class="projects__tabs">
<button class="tab projects__tab" data-tab="#video_1">ВИДЕО 1</button>
<button class="tab projects__tab" data-tab="#video_2">ВИДЕО 2</button>
<button class="tab projects__tab" data-tab="#video_3">ВИДЕО 3</button>
</div>
<div class="projects__content">
<div class="projects__container" id="video_1"></div>
<div class="projects__container" id="video_2"></div>
<div class="projects__container" id="video_3"></div>
</div>
JavaScript
document.addEventListener('DOMContentLoaded', function () {
let tabsBtn = document.querySelectorAll('.tab');
let projects = document.querySelectorAll('.projects__container');
tabsBtn.forEach(function (tab) {
tab.addEventListener('click', function () {
let currentTab = tab;
let tabId = currentTab.getAttribute('data-tab');
let project = document.querySelector(tabId);
if (!currentTab.classList.contains('tab--active')) {
tabsBtn.forEach(function (item) {
item.classList.remove('tab--active');
});
projects.forEach(function (item) {
item.classList.remove('project__container--active');
});
currentTab.classList.add('tab--active');
project.classList.add('project__container--active');
};
});
});
document.querySelector('.tab').click();
});