[FIXED] Remove color of element after MouseOver using javascript/Jquery

Issue

I'm trying to make a star rating system for my Django project using JS and jQuery. I want to change the color of stars when the mouse is on each star.

I don't want the star color to persist on unhover.

I followed this tutorial on YouTube. In this video it seems to work.
JavaScript method preferred

(function($) {
  "use strict";

  $(document).ready(function() {

    const starone = document.getElementById('star-first')
    const startwo = document.getElementById('star-second')
    const starthird = document.getElementById('star-third')
    const starfourth = document.getElementById('star-fourth')
    const starfifth = document.getElementById('star-fifth')

    const form = document.querySelector('.rate-form')
    const confirmBox = document.getElementById('confirm-score')
    const csrf = document.getElementsByName('csrfmiddlewaretoken')

    const handleStarSelect = (size) => {
      const children = form.children
      for (let i = 0; i < children.length; i++) {
        if (i <= size) {
          children[i].classList.add('checked')
        } else {
          children[i].classList.remove('checked')
        }
      }
    }
    // handleStarSelect(2)

    const handleSelect = (selection) => {
      switch (selection) {
        case 'star-first':
          {
            // starone.classList.add('checked')
            // startwo.classList.remove('checked')
            // starthird.classList.remove('checked')
            // starfourth.classList.remove('checked')
            // starfifth.classList.remove('checked')
            handleStarSelect(1)
            return
          }

        case 'star-second':
          {
            handleStarSelect(2)
            return
          }
        case 'star-third':
          {
            handleStarSelect(3)
            return
          }
        case 'star-fourth':
          {
            handleStarSelect(4)
            return
          }
        case 'star-fifth':
          {
            handleStarSelect(5)
            return
          }

      }

    }

    const arr = [starone, startwo, starthird, starfourth, starfifth]

    arr.forEach(item => item.addEventListener('mouseover', (event) => {
      handleSelect(event.target.id)
    }))

  });
})(jQuery);

.checked {
  color: #f2994a;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="user-rating">
  <form action="" method="post" class="rate-form">
    {% csrf_token %}
    <button type="submit" class="fa fa-star fa-lg" id="star-first"></button>
    <button type="submit" class="fa fa-star fa-lg" id="star-second"></button>
    <button type="submit" class="fa fa-star fa-lg" id="star-third"></button>
    <button type="submit" class="fa fa-star fa-lg" id="star-fourth"></button>
    <button type="submit" class="fa fa-star fa-lg" id="star-fifth"></button>
  </form>
  <div id="confirm-score"></div>
</div>

Solution

You can achieve the same result with CSS alone. Don't forget to add keyboard focus events.

EDIT: Going over your question again I saw that you didn't want a CSS solution. A CSS solution is often better than a JavaScript solution as some users disable JavaScript for security and CSS can make some things simpler. I'm going to also add a vanilla JavaScript answer for you but I recommend only using JavaScript where absolutely needed.

.stars {
  display: inline flex;
  flex-flow: row-reverse;
}

.star {
  background-color: initial;
  border: initial;
}

.star:hover,
.star:focus,
.star:hover~.star,
.star:focus~.star {
  cursor: pointer;
  color: #f2994a;
}

.star:focus {
  outline: 2px solid #f2994a;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="user-rating">
  <form action="" method="post" class="rate-form">
    {% csrf_token %}
    <div class="stars">
      <button type="submit" class="star" id="star-fifth"><i class="fa fa-star fa-lg"></i></button>
      <button type="submit" class="star" id="star-fourth"><i class="fa fa-star fa-lg"></i></button>
      <button type="submit" class="star" id="star-third"><i class="fa fa-star fa-lg"></i></button>
      <button type="submit" class="star" id="star-second"><i class="fa fa-star fa-lg"></i></button>
      <button type="submit" class="star" id="star-first"><i class="fa fa-star fa-lg"></i></button>
    </div>
  </form>
  <div id="confirm-score"></div>
</div>

JavaScript solution:

document.querySelectorAll('.star').forEach((star) => {
  star.addEventListener('mouseenter', addRating)
  star.addEventListener('focus', addRating)
  star.addEventListener('mouseleave', removeRating)
  star.addEventListener('blur', removeRating)
})

function addRating(event) {
  applyRating(event.target, "add")
}

function removeRating(event) {
  applyRating(event.target, "remove")
}

function applyRating(element, action) {
  document.querySelectorAll(`#${element.id}~.star`).forEach((prevStar) => prevStar.classList[action]('checked'))
  element.classList[action]('checked')
}

.stars {
  display: inline flex;
  flex-flow: row-reverse;
}

.star {
  background-color: initial;
  border: initial;
}

.checked {
  color: #f2994a;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="user-rating">
  <form action="" method="post" class="rate-form">
    {% csrf_token %}
    <div class="stars">
      <button type="submit" class="star" id="star-fifth"><i class="fa fa-star fa-lg"></i></button>
      <button type="submit" class="star" id="star-fourth"><i class="fa fa-star fa-lg"></i></button>
      <button type="submit" class="star" id="star-third"><i class="fa fa-star fa-lg"></i></button>
      <button type="submit" class="star" id="star-second"><i class="fa fa-star fa-lg"></i></button>
      <button type="submit" class="star" id="star-first"><i class="fa fa-star fa-lg"></i></button>
    </div>
  </form>
  <div id="confirm-score"></div>
</div>

Answered By - Zach Jensz