JSFiddle - React, Tailwind, and code Playground

HTML

<form id="form" onsubmit="return check_all();" method="get">
    <!--<p><input type="checkbox" id="Checkbox1" /> Ruby <span id="Div1">0</span></p>
  <p><input type="checkbox" id="Checkbox2" /> C <span id="Div2">0</span></p>
  <p><input type="checkbox" id="Checkbox3" /> Java <span id="Div3">0</span></p>
  <p><input type="checkbox" id="Checkbox4" /> Delphi <span id="Div4">0</span></p>
  <p><input type="checkbox" id="Checkbox5" /> C++ <span id="Div5">0</span></p>-->
    <p>
        <input type="checkbox" id="Checkbox1" value="Checkbox1" name="lang" />Język 1 <span id="Span1" class="white" >0</span>
    </p>
    <p>
        <input type="checkbox" id="Checkbox2" value="Checkbox2" name="lang" />Język 2 <span id="Span2" class="white">0</span>
    </p>
    <p>
        <input type="checkbox" id="Checkbox3" value="Checkbox3" name="lang" />Język 3 <span id="Span3" class="white">0</span>
    </p>
    <p>
        <input type="checkbox" id="Checkbox4" value="Checkbox4" name="lang" />Język 4 <span id="Span4" class="white">0</span>
    </p>
    <p>
        <input type="checkbox" id="Checkbox5" value="Checkbox5" name="lang" />Język 5 <span id="Span5" class="white">0</span>
    </p>
    <div class="send">
        <input type="submit" value="Wyślij formularz">
    </div>
</form>

CSS

p {
    padding: 0;
    margin: 0;
    font-family:'Century Gothic';
    font-size:larger;
    margin:5px;
    padding:5px;
}
.green {
    background-color:green;
    border:1px solid black;
    border-radius:100%;
    padding:5px;
    margin:5px;
}
.white {
    background-color:white;
    border:1px solid white;
    border-radius:100%;
    padding:5px;
    margin:5px;
}
.red {
    background-color:red;
    border:1px solid black;
    border-radius:100%;
    padding:5px;
    margin:5px;
}
.send {
    margin-top: 20px;
}

JavaScript

(function() {
    var checked = [];
    
    document.getElementById("Checkbox1").addEventListener("click",toggle);
    document.getElementById("Checkbox2").addEventListener("click",toggle);
    document.getElementById("Checkbox3").addEventListener("click",toggle);
    document.getElementById("Checkbox4").addEventListener("click",toggle);
    document.getElementById("Checkbox5").addEventListener("click",toggle);
    
    function toggle() {
        if (this.checked) {
            checked.push(this);
        } else {
            var index = checked.indexOf(this);
            var box = checked.splice(index,1)[0];
            box.nextElementSibling.className = "white";
        }
        refresh();
    }
    
    function refresh() {
        for (var i = 0; i < checked.length; i++) {
            if (i < 3) {
                checked[i].nextElementSibling.className = "green";
            } else {
                checked[i].nextElementSibling.className = "red";
            }
        }
        
    }
    
}());