function tabs(selector) {
const tab = document.querySelector(selector);
const tabNav = tab.querySelectorAll('.tabs-nav__item');
const tabContent = tab.querySelectorAll('.tab');
tab.addEventListener('click', selectTabNav);
function selectTabNav(event) {
const tabName = event.target.dataset.tabName;
if (!tabName) return;
tabNav.forEach(item => item.classList.remove('is-active'));
event.target.classList.add('is-active');
tabContent.forEach(item => {
item.classList.contains(tabName) ?
item.classList.add('is-active') :
item.classList.remove('is-active');
});
}
}
tabs('#tabs-1');
tabs('#tabs-2');
<div class="wrapper">
<div id="tabs-1" class="tabs">
<!-- ... -->
</div>
<div id="tabs-2" class="tabs">
<!-- ... -->
</div>
</div>
