[nik.chernov85]

Добрый день, имею вот такие 2 лока:

<div class="l-block-decoration l_roof block_2">
                    <div class="title-decoration">ОТДЕЛКА ПОТОЛКА</div>
                    <div class="vars align-justify">
                        <div class="item-lining bg-none close" data-cat-id="7" data-name-cat="ceiling-decoration" data-element-id="0">
                            <img src="assets/template/images/close-btn.png" alt="">
                            <div>Нет</div>
                        </div>
                        <div class="item-lining bg-none"  data-background-url="assets/template/image/filter/additional/ad84276b47d00f274e2fba811c27d1ed.png"  data-name-cat="ceiling-decoration"  data-element-id="4600">
                            <img src="assets/template/image/filter/additional/76b9eef4a289c8ff7dffc26b11d27796.png" alt="">
                            <div>Деревянная вагонка</div>
                        </div>
                        <div class="item-lining bg-none"  data-background-url="assets/template/image/filter/additional/d87466caf81e0449f059d31668fc3a9c.png"  data-name-cat="ceiling-decoration" name="getItems" data-element-id="3200">
                            <img src="assets/template/image/filter/additional/8218cd20120dbc83a7c94ce6ced69964.png" alt="">
                            <div>ПВХ вагонка</div>
                        </div>
                    </div>
                </div>
                <div class="l-block-decoration l_roof mt180 block_3">
                    <div class="title-decoration">
                        <div>ВНЕШНЯЯ ОБШИВКА</div>
                        <div class="green-line3"></div>
                    </div>
                    <div class="vars align-justify">
                        <div class="item-lining bg-none close" data-cat-id="3"  data-name-cat="maket-cladding" data-element-id="0">
                            <img src="assets/template/images/close-btn.png" alt="">
                            <div>Нет</div>
                        </div>
                        <div class="item-lining bg-none"  data-background-url="assets/template/image/filter/additional/26bfc78cf27c9adf76c86cb85c945e21.png"  data-name-cat="maket-cladding"  data-element-id="4600">
                            <img src="assets/template/image/filter/additional/48566ff5b5da4aeb37d9cdf372b5dabc.png" alt="">
                            <div>Цветной металл</div>
                        </div>
                        <div class="item-lining bg-none"  data-background-url="assets/template/image/filter/additional/5f1be4954213ea77f47cee5442ad002b.png"  data-name-cat="maket-cladding"  data-element-id="4000">
                            <img src="assets/template/image/filter/additional/bfa4bdf204818aa734a5b74ce969a9a2.png" alt="">
                            <div>ПВХ вагонка</div>
                        </div>
    
                        </div>
                    </div>
                </div>

у каждого из них есть атрибут data-element-id, и каждый блок с классом item-lining в родительском блоке с классом block_2 и block_3 при клике на него получает класс active. У меня задача чтобы при клике на блок получать его атриюут и складывать его со следующим.
Вот как я выбираю блок с классом active

$(document).on("click",".item-lining",function() {
  
        if ($('.block_2 .vars .bg-none').hasClass('active')) {
            var block_2 = Number($(this).attr('data-element-id'));
        } else {
            console.log("Шеф все пропало");
        }

       var result = block_2;
       console.log(result);
    });

Понимаю что если написать условие для block_3 то также могу получить значение атрибута, но как правильно их скалдывать между собой? писать несколько условия? или нужен цикл?
Помогите понять?