JQuery Custom Rating

 <style>

.rating {

  font-size: 24px;

}

.star {

  cursor: pointer;

  color: gray;

}

.star:hover,

.star.active {

  color: rgb(255, 207, 0);

}

</style>

<div class="form-group">

                                            <p class="mg-b-10" id="leadRatingTxt">Lead Rating (<?= $lead_rating ? $lead_rating: 0 ?>)<span class="text-danger">*</span></p> 

                                            <div class="rating">

                                                <span class="star" data-value="1">&#9733;</span>

                                                <span class="star" data-value="2">&#9733;</span>

                                                <span class="star" data-value="3">&#9733;</span>

                                                <span class="star" data-value="4">&#9733;</span>

                                                <span class="star" data-value="5">&#9733;</span>

                                                <span class="star" data-value="6">&#9733;</span>

                                                <span class="star" data-value="7">&#9733;</span>

                                                <span class="star" data-value="8">&#9733;</span>

                                                <span class="star" data-value="9">&#9733;</span>

                                                <span class="star" data-value="10">&#9733;</span>

                                            </div>

                                            <input type="hidden" id="lead_rating"  name="lead_rating" value="" />

                                              @error('lead_rating')

                                            <span class="text-danger">{{ $message }}</span>

                                            @enderror

                                        </div>

                                    </div>

Script:

var selectedRating = 0;

<?php if(isset($lead_rating) && $lead_rating > 0){ ?>

    highlightStars('<?= $lead_rating ?>')

<?php } ?>

$('.star').on('mouseover', function() {

  var value = $(this).data('value');

  highlightStars(value);

});

$('.star').on('mouseout', function() {

  highlightStars(selectedRating);

});

$('.star').on('click', function() {

  selectedRating = $(this).data('value');

  $('#leadRatingTxt').text("Lead Rating ("+selectedRating+")");

  $('#lead_rating').val(selectedRating);

});

function highlightStars(count) {

  $('.star').removeClass('active');

  $('.star:lt(' + count + ')').addClass('active');

}