<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-lg-4"> <div class="review-box"> <h2 class="title mb-4"> :: Review by number ::</h2> <div class="rating-number"> <ul id="number"> <li class="no" title="Poor" data-value="1"> <div class="number">01</div> </li> <li class="no" title="Fair" data-value="2"> <div class="number">02</div> </li> <li class="no" title="Good" data-value="3"> <div class="number">03</div> </li> <li class="no" title="Excellent" data-value="4"> <div class="number">04</div> </li> <li class="no" title="WOW!!!" data-value="5"> <div class="number">05</div> </li> </ul> <input type="hidden" id="rateing_id"> </div> </div> </div> </div> </div>

.review-box .title{ margin-bottom: 2rem; } .rating-number ul { list-style-type:none; padding:0; } .rating-number ul > li.no { display:inline-block; margin-inline-end: .5rem; cursor: pointer; } .rating-number ul > li.no > .number { width: 50px; height: 50px; line-height: 45px; text-align: center; border-radius: 50%; background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #BABABA; font-size: 20px; font-weight: bold; color: #203444; transition: all 0.3s ease; } .rating-number ul > li.no.hover > .number, .rating-number ul > li.no.selected > .number { color: #fff; background-color: #41a161; border-color: #41a161; }

$(document).ready(function(){ $('#number li').on('mouseover', function(){ var onNumber = parseInt($(this).data('value'), 10); $(this).parent().children('li.no').each(function(e){ if (e < onNumber) { $(this).addClass('hover'); } else { $(this).removeClass('hover'); } }); }).on('mouseout', function(){ $(this).parent().children('li.no').each(function(e){ $(this).removeClass('hover'); }); }); $('#number li').on('click', function(){ var onNumber = parseInt($(this).data('value'), 10); var nos = $(this).parent().children('li.no'); for (var i = 0; i < nos.length; i++) { $(nos[i]).removeClass('selected'); } for (var i = 0; i < onNumber; i++) { $(nos[i]).addClass('selected'); } var ratingValue = parseInt($('#number li.selected').last().data('value'), 10); $("#rateing_id").val(ratingValue); }); });