JSFiddle - React, Tailwind, and code Playground

by Oliver_kh

HTML

<div class="ff">1</div>
<div class="ff">2</div>
<div class="ff">3</div>
<div class="ff">4</div>
<div class="ff">5</div>
<div class="summ">0</div>

CSS

.active {
    background:#eee;
}
.summ {
    border-top:2px solid red;
    margin:10px 0 0 0;
}

JavaScript

$(function () {
    $('.ff').click(function () {
        if (!$(this).hasClass('active')) {
            $(this).addClass('active');
            var summ = parseInt($('.summ').text()) + parseInt($(this).text());
            $('.summ').text(summ);
        } else {
            $(this).removeClass('active');
            var summ = parseInt($('.summ').text()) - parseInt($(this).text());
            $('.summ').text(summ);
        }
    });
});