JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<h1>Jquery Rating Plugin Examples:</h1>
<div class="jq-rate stars" data-count="5" data-post="rate1" data="2"></div>
<div class="jq-rate black-square" data-count="5" data-post="rate2" data="4"></div>
<div class="jq-rate green-round" data-count="5" data-post="rate3" data="2"></div>

CSS

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}html{line-height:1}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,td,th{text-align:left;font-weight:400;vertical-align:middle}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}a img{border:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}body,html{font-size:10px}h1{text-align:center;font-size:3rem}.jq-rate{margin:5rem}.jq-rate .jq-rate-element{width:2rem;height:2rem;margin-left:0rem;cursor:pointer;border:1px solid #6f6f6f;display:inline-block}.black-square .full{background:#000}.black-square .half{background:rgba(111,111,111,.48)}.green-round .jq-rate-element{border-radius:4rem}.green-round .empty{background:#fff}.green-round .full{background:#0eee0f}.stars .jq-rate-element{border:0}.stars .full:before{color:#ffbd00;font-size:3rem;content:"\2605"}.stars .empty:before{color:#6f6f6f;font-size:3rem;content:"\2605"}

JavaScript

(function(e){e.fn.rate=function(){e(this).each(function(){var t=e(this).attr("data-count");var n=e(this).attr("data");var r=e(this).attr("data-post");var i="empty";for(var s=1;s<=t;s++){if(n>=s)i="full";else if(Math.round(n)==s){if(Math.round(n)!=n)i="half"}else i="empty";e(this).append('<div class="jq-rate-element '+i+'" data-num="'+s+'"></div>')}e(this).append('<input type="hidden" name="rate_'+r+'" value="'+n+'" />');e(this).append('<input type="hidden" name="rate_'+r+'_current" value="'+n+'" />');e(this).children(".jq-rate-element").mouseover(function(){var t=e(this).parent();var n=e(this).attr("data-num");t.children(".jq-rate-element").each(function(t,r){e(this).attr("class","jq-rate-element empty");if(e(this).attr("data-num")<=n)e(this).attr("class","jq-rate-element full")});e("[name=rate_"+r+"_current]").val(n)});e(this).mouseout(function(){var t=e(this);var n=e("[name=rate_"+r+"_current]").val();e(this).children(".jq-rate-element").each(function(n,r){if(e(this).attr("data-num")==Math.round(t.attr("data"))&&e(this).attr("data-num")!=t.attr("data"))e(this).attr("class","jq-rate-element half");else if(e(this).attr("data-num")>t.attr("data"))e(this).attr("class","jq-rate-element empty");else e(this).attr("class","jq-rate-element full")})});e(this).children(".jq-rate-element").click(function(){var t=e(this).attr("data-num");e(this).parent().attr("data",t);e("[name=rate_"+r+"]").val(t)})})}})(jQuery);$(document).ready(function(){$(".jq-rate").rate()})