JSFiddle - React, Tailwind, and code Playground

HTML

Remaining: <span id="remaining">12</span><br/>

JavaScript

function chooseBon(evt) {
    var bonbonsAmount = 12;
    var bonbonsCurrent = 0;
    var bonbonsRemaining; //max. is bonbonsAmount
    var inputs, i, j;
    inputs = document.getElementsByTagName('select');
    //alert(evt.target.outerHTML+' was changed');
    //alert(inputs.length);
    for (i = 0; i < inputs.length; i++) {
        bonbonsCurrent += parseInt(inputs[i].selectedIndex, 10);
    }

    document.getElementById('remaining').innerHTML = bonbonsRemaining;
}

function append_selects(count) {
    var i, j, sel, opt;
    for (i = 1; i <= count; i++) {
        sel = document.createElement('select');
        sel.name = 'choco' + i;
        for (j = 0; j <= 12; j++) {
            opt = document.createElement('option');
            opt.value = Math.floor(Math.random()*1000);
            opt.appendChild(document.createTextNode(j ? j + 'x' : '-'));
            sel.appendChild(opt);
            sel.onchange = chooseBon;
        }
        document.body.appendChild(document.createTextNode('Chocolate ' + i + ': '));
        document.body.appendChild(sel);
        document.body.appendChild(document.createElement('br'));
    }
}

window.onload = function() {
    append_selects(10);
};