Как сделать перебор категорий и изменение количества элементов в разделе?

Всем доброго времени суток. Работаю в Битриксе. У меня есть раздел с товарами:

Каждому товару назначена категория, и соответственно он попадает в определенный раздел

Подскажите, как мне сделать так, чтоб при добавлении товара менялось количество?

<div class="row">
<div class="col-md-12">
    <div class="filter-menu">
        <ul class="button-group sort-button-group">
            <li class="button active" data-category="all">All<span>8</span></li>
            <li class="button" data-category="cat-1">Dresses and Suits<span>2</span></li>
            <li class="button" data-category="cat-2">Accessories<span>2</span></li>
            <li class="button" data-category="cat-3">Miscellaneous<span>4</span></li>
        </ul>
    </div>
</div>

Шаблон с товарами:

div class="row">
<div class="col-md-12">
    <div class="filter-menu">
        <ul class="button-group sort-button-group">
            <li class="button active" data-category="all">All<span>8</span></li>
            <li class="button" data-category="cat-1">Dresses and Suits<span>2</span></li>
            <li class="button" data-category="cat-2">Accessories<span>2</span></li>
            <li class="button" data-category="cat-3">Miscellaneous<span>4</span></li>
        </ul>
    </div>
    </div>
</div>

<div class="row featured isotope" style="position: relative; height: 761.3px;">
    <?foreach($arResult["ITEMS"] as $key=>$arItem):?>
        
    <?
    $left = "left: 0px;";
    switch ($key%4){
        case 1:
            $left = "left: 292px;";
            break;
        case 2:
            $left = "left: 585px;";
            break;
        case 3:
            $left = "left: 877px;";
            break;
    }
    ?>
    
    <div id="<?=$this->GetEditAreaId($arItem['ID']);?>" class="col-md-3 col-sm-6 col-xs-12 <?=$arItem['PROPERTIES']['CATEGORY']['VALUE']?> featured-items isotope-item" style="position: absolute; <?=$left?> top: 0px;">
        <div class="product-item">
            <img src="<?=$arItem['PREVIEW_PICTURE']['SRC']?>" class="img-responsive" alt="" width="255" height="322">
            <div class="sell-meta">
                <?if (!empty($arItem['PROPERTIES']['NEW']['VALUE'])){?>
                    <a href="#" class="new-item"><?=$arItem['PROPERTIES']['NEW']['VALUE']?></a>
                <?}?>
                <?if (!empty($arItem['PROPERTIES']['SELL']['VALUE'])){?>
                    <a href="#" class="sell-item"><?=$arItem['PROPERTIES']['SELL']['VALUE']?></a>
                <?}?>
            </div>
            <div class="product-hover">
                <div class="product-meta">
                    <a href="#"><i class="pe-7s-like"></i></a>
                    <a href="#"><i class="pe-7s-shuffle"></i></a>
                    <a href="#"><i class="pe-7s-clock"></i></a>
                    <a href="#"><i class="pe-7s-cart"></i>Add to Cart</a>
                </div>
            </div>
            <div class="product-title">
                    <a href="#">
                        <h3><?=$arItem['NAME']?></h3>
                        <span>$<?=$arItem['PROPERTIES']['PRICE']['VALUE']?></span>
                    </a>
                </div>
            </div>
        </div>
    <?endforeach;?>
</div>