JSFiddle - React, Tailwind, and code Playground

HTML

<div id="rating"></div>

<div id="starRating2">
</div>

CSS

img { cursor: pointer; }

JavaScript

(function( $ ) {
 
    $.fn.starRating = function() {
        var chosenRating = 4;
        this.mouseout(function () {setRating(chosenRating);});
        this.mousemove(function (e) {       
           var parentOffset = $(this).parent().offset(); 
           
           //or $(this).offset(); if you really just want the current element's offset
           var relX = e.pageX - parentOffset.left;
           var relY = e.pageY - parentOffset.top;
            
            if (relX > 0)
            {
                changeImages(1);
            }
            if (relX > 50)
            {
                changeImages(2);
            }
            if (relX > 100)
            {
                changeImages(3);
            }
            if (relX > 150)
            {
                changeImages(4);
            }
            if (relX > 200)
            {
                changeImages(5);
            }
        });
        
        function changeSrcAtt(id,hover)
        {
            var realId = '#' + id;
            if (hover)
            {
                $(realId).attr('src', 'http://blog.applause.com/wp-content/uploads/2013/05/one_star.jpg');     
            }
            else
            {
                $(realId).attr('src', 'http://etc.usf.edu/clipart/37700/37717/05-star_37717_lg.gif');  
            }
        }
        
        function changeImages(hoverNumber)
        {
            if (hoverNumber < chosenRating)
            {return;}
            
            changeSrcAtt('star1', false);
            changeSrcAtt('star2', false);
            changeSrcAtt('star3', false);
            changeSrcAtt('star4', false);
            changeSrcAtt('star5', false);
            if(hoverNumber >= 1)
            {
            changeSrcAtt('star1', true);
            }
            if(hoverNumber >= 2)
            {
            changeSrcAtt('star2', true);
            }
            if(hoverNumber >= 3)
            {
            changeSrcAtt('star3', true);
            }
       ...