JSFiddle - React, Tailwind, and code Playground

HTML

<div id="starRating">
    <img id="star1" src="http://etc.usf.edu/clipart/37700/37717/05-star_37717_lg.gif" width="50" alt="" />
    <img id="star2" src="http://etc.usf.edu/clipart/37700/37717/05-star_37717_lg.gif" width="50" alt="" />
    <img id="star3" src="http://etc.usf.edu/clipart/37700/37717/05-star_37717_lg.gif" width="50" alt="" />
    <img id="star4" src="http://etc.usf.edu/clipart/37700/37717/05-star_37717_lg.gif" width="50" alt="" />
    <img id="star5" src="http://etc.usf.edu/clipart/37700/37717/05-star_37717_lg.gif" width="50" alt="" />
</div>
<div id="xy"></div>
<div id="rating"></div>

CSS

img { cursor: pointer; }

JavaScript

$(document).ready(function () {
    var chosenRating = 2;
    $('#starRating').mouseout(function () {setRating(chosenRating);});
    $('#starRating').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;
        
        $('#xy').empty().append(relX + ' ' + relY);
        
        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);
        }
        if(hoverNumber >= 4)
        {
        changeSrcAtt('star4', true);
        }
        if(hoverNumber >= 5)
        {
        changeSrcAtt('star5', true);
        }
        
       ...