JSFiddle - React, Tailwind, and code Playground
HTML
<div class="voter"></div>
CSS
.voter-wrapper{
width:30px;
text-align:center;
border-style:solid;
}
.voter-action{
background-color:yellow;
}
JavaScript
(function($){
$.fn.voter = function(options){
var settings = {
start:0,
max:10,
min:0
};
if(options){
$.extend( settings, options );
}
return this.each(function(){
$(this).addClass("voter-wrapper");
var inner=$('<div>'+settings.start+'</div>');
var up = $('<div>+</div>').addClass('voter-action');
up.click(function(){
if(parseInt(inner.html())<settings.max){
inner.html(parseInt(inner.html())+1);
}
});
$(this).append(up);
$(this).append(inner);
var down = $('<div>-</div>').addClass('voter-action');
down.click(function(){
if(parseInt(inner.html())>settings.min){
inner.html(parseInt(inner.html())-1);
}
});
$(this).append(down);
});
};
}
)(jQuery);
$(".voter").voter();