Как получить значение value из тега li?

Решил заменить чекбоксы с помощью списка ul и стилизовать. В итоге столкнулся с проблемой.
Как взять data-attr значение из списка li ?
И если выбрать другой li, то выберется соответствующий data-attr.
Пробовал эти варианты, но там почему-то берется только первый li и больше не переключается:
function costCalculator() { document.getElementById('result').innerHTML = parseInt(document.getElementById('area').value) + 1; }
и
function costCalculator() { result.innerHTML = parseInt(area.value) + $('.rooms.active').attr('data-attr'); }
\ \ \ \
Песочница для экспериментов: https://jsfiddle.net/Mesuti/5kugx8j6/5/

• 1 комнатная
• 2 комнатная
• 3 комнатная

Результат:

// Математика Input + Data-attr. ВМЕСТО XXXXXXX НУЖНО ВЗЯТЬ ЗНАЧЕНИЕ LI. ЕСЛИ ВЫБИРАТЬ ДРУГОЙ LI, ТО ЗНАЧЕНИЕ МЕНЯЕТСЯ.
function costCalculator() { result.innerHTML = parseInt(area.value) + XXXXXXX; }

Ответ

чтобы значение из data-attr складывалось со значением площади area необходимо привести значение к числу с помощью parseInt():
parseInt($('.rooms.active').attr('data-attr'))
Кроме того при переходе на следующую вкладку необходимо делать пересчет, т.е. вызывать функцию costCalculator по клику на вкладке.
$('#kvart').click(function() { $('#area').fadeOut(100, function () { $('#room').fadeIn('100'); }); }); $('#house').click(function() { $('#room').fadeOut(100, function () { $('#area').fadeIn('100'); }); }); $('#kommerc').click(function() { $('#room').fadeOut(100, function () { $('#area').fadeIn('100'); }); }); $('#home').on('click', 'li', function(){ $(this).addClass('active').siblings().removeClass('active'); }); $('#room').on('click', 'li', function(){ $(this).addClass('active').siblings().removeClass('active'); costCalculator(); }); function onInput() { costCalculator(); } // Математика Input + Data-attr function costCalculator() { result.innerHTML = parseInt(area.value) + parseInt($('.rooms.active').attr('data-attr')); } document.getElementById('area').addEventListener('input', onInput); .characteristic { list-style: none; margin-left: 0; opacity: 1; } .characteristic li { display: inline-block; border: #F03226 solid 1px; padding: 14px 24px; color: #606060; transition: all 0.2s linear; } .characteristic li:hover { background-color: #F03226; color: white; cursor: pointer; } .active { background-color: #F03226; color: white !important; } #area { border: #F03226 solid 1px; padding: 14px 24px; color: #606060; margin-left: 40px; } #area:active, #area:focus { outline: none; } .dn { display: none }

• Квартира
• Дом
• Коммерческие помещения

• 1 комнатная
• 2 комнатная
• 3 комнатная

Результат: