JSFiddle - React, Tailwind, and code Playground

HTML

<!--<form method='post' class="form-horizontal" id="myform">-->
    <input type="checkbox" attr1="2" attr2="4" prodname="product1"/> product1
    <input type="checkbox" attr1="5" attr2="1" prodname="product2"/> product2
    <input type="checkbox" attr1="1" attr2="7" prodname="product3"/> product3
    <button id="calcBtn" class="btn btn-success pull-right">Calculate</button>
    <!--<button type="submit" class="btn btn-success pull-right">Calculate</button>
</form>-->

JavaScript

$('#calcBtn').click(calculator);

function calculator() {
    var sumAttr1 = null;
    var bestProductName = null;
	var maxScorePart = null;
    
    // Get the sum of 1st attribute
    $('input:checkbox:checked').each(function() {
		var valueAttr1 = parseInt($(this).attr('attr1'));
        var valueAttr2 = parseInt($(this).attr('attr2'));
		
        // Cumulate attr1 for final calc
        sumAttr1 += valueAttr1;
        
        // Check best prod
        var currentScorePart = 10 * valueAttr1 - valueAttr2;
        if(currentScorePart > maxScorePart) {
            maxScorePart = currentScorePart;
            bestProductName = $(this).attr('prodname');
        }
    });
    
    var maxScore = sumAttr1 / $('input:checkbox:checked').length + maxScorePart;
    alert('Best product = ' + bestProductName + '\r\nBest product score = ' + maxScore);
}