Javascript-форум - Переключение активного "таба"

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

<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" на странице много, нужно что бы табы у них переключались независимо друг от друга.

<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .tabs__item--active{ background-color: #8B4513; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { $(".tabs__inner").on("click", ".tabs__item", function(event) { $(".tabs__item", event.delegateTarget).removeClass("tabs__item--active") $(this).addClass("tabs__item--active") }) }); </script> </head> <body> <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> <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> </body> </html>