JSFiddle - React, Tailwind, and code Playground

by igos

HTML

<div>
Summary: <input class="rowSum rowSum_11" type="text" /><br/>
Months:<input class="month" type="text" />
<input class="month" type="text" />
<input class="month" type="text" />
<input class="month" type="text" />
<input class="month" type="text" />
<input class="month" type="text" />
<input class="month" type="text" />
<input class="month" type="text" />
<input class="month" type="text" />
<input class="month" type="text" />
<input class="month" type="text" />
<input class="month" type="text" />
<input id="check" type="text" />
</div>
<div>
Summary: <input class="rowSum rowSum_12" type="text" /><br/>
Months:<input class="month" type="text" />
<input class="month" type="text" />
<input class="month" type="text" />
<input class="month" type="text" />
<input class="month" type="text" />
<input class="month" type="text" />
<input class="month" type="text" />
<input class="month" type="text" />
<input class="month" type="text" />
<input class="month" type="text" />
<input class="month" type="text" />
<input class="month" type="text" />
<input id="check" type="text" />
</div>
<div>
Summary: <input id="summary" class="avarage_11 avarage_12" type="text" /><br/>
Months:<input class="month" type="text" />
<input class="month" type="text" />
<input class="month" type="text" />
<input class="month" type="text" />
<input class="month" type="text" />
<input class="month" type="text" />
<input class="month" type="text" />
<input class="month" type="text" />
<input class="month" type="text" />
<input class="month" type="text" />
<input class="month" type="text" />
<input class="month" type="text" />
<input id="check" type="text" />
</div>

JavaScript

function round(num) {
    return Math.ceil(num * 100) / 100;
}
$('.month').change(function() {
    $(this).parent().find('.rowSum').change();
});
$(".rowSum_11").on("change",function() {
    $(".avarage_11").trigger('countAvarage');
});

var setting_avarage = 'avarage_';
var setting_rowsum = '.rowSum_';
var setting_month = '.month';

$("#summary").on("countAvarage",function() {
    var thisElement = $(this);    
    //nasze punkty
    var localElements = thisElement.parent().find(setting_month);
    
    var referenceElements = [];
    var elemCount = 0;
    
    //punkty referencyjne
    var classes = thisElement.attr('class').split(' ');
    for (var i = 0; i < classes.length; i++) {
        if(classes[i].lastIndexOf(setting_avarage, 0) === 0) {
           referenceElements[elemCount] = $(setting_rowsum+classes[i].replace(setting_avarage,'')).parent();
            if(referenceElements[elemCount].length != 0) {
               elemCount++;
            }
        }   
    }
    var sumXW = 0;
    var sumW = 0;
    localElements.each(function(index, value) {
        var x = parseFloat($(this).val());
        var w = 1;
        for(var j = 0; j < elemCount;j++) {
            var wdt = parseFloat(referenceElements[j].find(setting_month).eq(index).val());
            
            if(jQuery.isNumeric(wdt) ) {
                w = w * wdt;
            }
        }

        if(jQuery.isNumeric(w) && jQuery.isNumeric(x)) {
            sumXW = sumXW + (x*w);
            sumW = sumW + w;
        }
    });
    thisElement.val(sumXW/sumW);
});