JSFiddle - React, Tailwind, and code Playground

by Symphony

HTML

<div id="wr">
    <div class="check" data-count="0" id="yes"><b>yes</b><span></span></div>
    <div class="check" data-count="0" id="no"><b>no</b><span></span></div>
</div>

CSS

#wr {
    margin: 60px 20px;
    font:14px sans-serif;
}
* {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#wr div {
    margin: 10px 0 0 45px;
    background: #ff8;
    padding: 5px 10px;
    position: relative;
    height: 18px;
}
#wr div b {
    display: block;
    position: absolute;
    z-index: 10;
    margin-left: -45px;
}
#wr div span {
    display: block;
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    background: #f97;
    line-height: 28px;
    z-index: 1;
    width: 0%;
    white-space: nowrap;
    text-align: center;
}

JavaScript

var myCheck = document.querySelectorAll(".check");
var total = 0;
[].forEach.call(myCheck, function(el) {
    el.addEventListener("click", function() {
        if(total<1000){
            var countData = parseInt(this.getAttribute("data-count"))+1;
            total = total + 1; 
            this.setAttribute("data-count",countData);
            for(var i=0; i < myCheck.length; i++){
                var countData = myCheck[i].getAttribute("data-count");
                myCheck[i].childNodes[1].style.width = countData*100/total+'%';
                myCheck[i].childNodes[1].innerHTML = countData+' voices';
            }
        }else{
            alert('100 voices');
        }
    });
});