How to toggle between classes using jquery

Issue

I have a rating star in my page, and I'm trying to toggle back and forth between "fa fa-star" class and "fa fa-star checked" class I have read about this here: Javascript/Jquery to change class onclick? And this is my implementation (it didn't work)

$('.fa fa-star').click(function() { $(this).toggleClass('fa fa-star'); $(this).toggleClass('fa fa-star checked'); });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <span onclick="rating" class="fa fa-star"></span>
    <span onclick="rating" class="fa fa-star checked"></span>
    <span onclick="rating" class="fa fa-star checked"></span>
    <span onclick="rating" class="fa fa-star checked"></span>
    <span onclick="rating" class="fa fa-star"></span>
</div>

Solution

maybe that...

document.querySelectorAll('i.fa-star')
.forEach( (star,indx,arr) =>
  {
  star.onclick =_=> 
    {
    let chk = star.classList.toggle('checked')
    arr.forEach((s,i) =>
      s.classList.toggle('checked', i<indx ? true: i===indx ? chk : false))
    }
  })

body {
  background : darkslategrey;
  font-size  : 24px;
  }
i.fa-solid.fa-star {
  color  : lightgray;
  cursor : pointer;
  }
i.fa-solid.fa-star.checked {
  color  : gold;
  }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />

<div>
  <i class="fa-solid fa-star"></i>
  <i class="fa-solid fa-star"></i>
  <i class="fa-solid fa-star"></i>
  <i class="fa-solid fa-star"></i>
  <i class="fa-solid fa-star"></i>
</div>

Answered By - Mister Jojo