JSFiddle - React, Tailwind, and code Playground

by adishardis

HTML

<div class="container">
    <div class="sum"> <a class="grey" data-mal="45" data-erb="23"></a>

    </div>
    <div class="sum"> <a class="grey" data-mal="35" data-erb="21"></a>

    </div>
    <div class="sum"> <a class="grey" data-mal="25" data-erb="22"></a>

    </div>
    <div class="sum"> <a class="grey" data-mal="95" data-erb="24"></a>

    </div>
</div>
<div id="total"></div>
<div id="min"></div>
<div id="max"></div>
<div id="count"></div>

CSS

.container {
    overflow:hidden;
    width:100%;
}
.grey {
    background-color:grey;
    float:left;
    height:100px;
    width:100px;
    margin:10px;
}
.benchmark {
    background-color:green;
    float:left;
    height:100px;
    width:100px;
    margin:10px;
}

JavaScript

$("a.grey, a.benchmark").click(function() {
    var $this = $(this);
    var classes = $this.hasClass("grey") ? ["grey", "benchmark"] : ["benchmark", "grey"];
    $this.removeClass(classes[0]).addClass(classes[1]);
});
var addup = function () {
    var sum = 0;
    prices = []
    $('.benchmark').each(function () {
        var malgrupp = $(this).data('mal');
        sum += malgrupp;
    });
    var antal = $('.benchmark').length;
    var antals = $('.benchmark').length;
    $('#total').text(sum / antal);
    $('#count').text(antals+' st');
};
addup();
$('.grey').click(addup);

var minmax = function () {
    var sum = 0;
    arr_malgrupp = []
    $('.benchmark').each(function () {
        var malgrupp = $(this).data('mal');
    arr_malgrupp.push(malgrupp);
    });
var minimum = Math.min.apply(Math,arr_malgrupp); 
var maximum = Math.max.apply(Math,arr_malgrupp); 
    $('#min').text(minimum);
    $('#max').text(maximum);
};
minmax();
$('.grey').click(minmax);