JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <content>
        <div id="box1" class="v1" onclick="counter('box1')";>A : <span class="num">0</span></div>
        <div id="box2" class="v2" onclick="counter('box2')">B: <span class="num">0</span></div>
        <div id="box3" class="v3" onclick="counter('box3')">C: <span class="num">0</span></div>
    </content>
</body>

CSS

content {
    display: -moz-box;
    display: -webkit-box;
    display: box;
    box-orient: horizontal;
    width: 100%;
    height : 100%;
}

div {
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
    height: 100px;
}

.v1{
    background : #FCC;
}

.v2{
    background : #CFC;
}

.v3{
    background : #CCF;
}

JavaScript

function counter(id){
       var id = document.getElementById(id);
       $('#id').click(function () {
            update($("span"));
        });
    }
    function update(j) {
            var n = parseInt(j.text(), 10);
            j.text(n + 1);
        }