[Tipylja]

Здравствуйте. на странице есть несколько секций с одинаковой разметкой, по смыслу это:
Горячие новинки, Хиты продаж, Акционные товары и т.д
Вот код

<section class="hitProducts layout__hitProducts">
    <div class="titleLine hitProducts__title">
        <span class="titleLine__text">Заголовок первого уровня</span>
    </div>
    <div class="hitProducts__tabs tabs">
        <div class="tabs__inner">
            <div class="tabs__item tabs__item--active">Полы</div>
            <div class="tabs__item">Потолки</div>
            <div class="tabs__item">Двери</div>
        </div>
    </div>
    <div class="layout__row">
        <div class="hitProducts__inner">
        <!--Айтем-->
        <!--Айтем-->
        <!--Айтем-->
        <!--Айтем-->
        <!--Айтем-->           
        </div>
    </div>


</section>

У каждого из таких блоков есть "табы", которые переключают категории, в зависимости от этого выводятся разные айтемы. Это отступление что бы был понятен смысл.
При загрузке страницы в каждом из таких блоков активен(имеет класс "tabs__item tabs__item--active") первый таб. Подскажите как при клике на допустим второй таб "Потолки", дать ему класс "tabs__item tabs__item--active", а у первого таба его убрать, оставить только "tabs__item". И таких блоков как "hitProducts" на странице много, нужно что бы табы у них переключались независимо друг от друга.