Выборка атрибутов по опрделенному классу и их сумма
 

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

Получить все item-lining.active, в цикле обойти их, получая data-element-id и складывая.

$(this).attr('data-element-id') - так не обязательно, проще так - +$(this).data('element-id') или +this.dataset.elementId.

а получить с помощью each?

$(document).on("click",".item-lining",function() { - это зря, делегировать нужно ближайшему родителю присутствующему на странице. То есть, в данном случае общему родителю блоков "l-block-decoration". А в обработчике щелчка получать все элементы ".item-lining.active", далее each.

Но странно у вас - щелчок по элементу, выбрали его, а снять выбор? Или выбор/снятие выбора иначе производится, тогда зачем этот обработчик щелчка?

А можно пример показать? я не очень пока понимаю каак выстроить логику

Ну если этот код все что имеется, то тут как раз никакой логики и нет. А что это, для чего тоже не понятно. Но если, к примеру, такой вариант: есть элемент выбором и снятием выбора которого управляют две независимые кнопки, то в обработчиках этих кнопок должен быть вызов функции, которая и будет в цикле обрабатывать элементы "item-lining.active", то есть, сразу после выбора/снятия выбора.

У вас же есть обработчик щелчок по самим элементам, а значит логично, что этот щелчок и должен выбирать/снимать выбор, то есть первый щелчок - выбрали, второй - сняли выбор, третий - выбрали, и т.д.. И тут же получаем коллекцию выбранных элементов и делаем расчет:

$(здесь_селектор_ближайшего_общего_родителя_l_roof).on("click", ".item-lining", function() {
    
    var o = $(this), v = 0;
    
    //лучше не каждому элементу соседу класс указывать,
    //а родителю vars, так как через css можно обратиться к дочерним
    //если это нужно  
    //выбираем/снимаем выбор с элементов блока vars
    o.parent().toggleClass('active');
    
    if(o.parent().hasClass('active')) {
        //получаем соседние элементы, обходим циклом
        o.siblings().each(function() {
            //получаем нужный атрибут, складываем
            v += +this.dataset.elementId
        });        
        v += +o.data('element-id')
    }
  
    console.log(v)
    //Если нужно у все выбранных посчитать, то есть родительских выбранных блоков, 
    //то получить все vars.active, обходом их в цикле, получать дочерние элементы элементы ">div"
    //и уже обходом их в цикле получать у них значение атрибута и складывать 
});

Если же отмечать не родителя, а как прежде элемент и соседние элементы, то так:

o.add(o.siblings()).toggleClass('active');

вместо o.parent().toggleClass('active');, и получать все элементы ".item-lining.active" у общего родителя, а в обработчике это будет event.delegateTarget (в функции добавить аргумент function(event)), и обходить их сразу одним циклом.