Not removing class or adding class [SOLVED]-CodePudding

I'm trying to make a star rating system, and I managed to make it so you can make the stars yellow. When I click the stars again, they don't turn white. In other words, I need help toggling the stars so they change colors. I'm a beginner in html, so I don't know what the problem is. Any help would be appreciated! Here is my code:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Star Rating</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script>
    $(function() {
      $(".n").click(function() {
        $(this).attr('src', 'star_checked.png');
        $(this).removeClass("n");
        $(this).addClass("y");
      });
      $(".y").click(function() {
        $(this).attr('src', 'star.png');
        $(this).removeClass("y");
        $(this).addClass("n");
      });
    });
    </script>
    <style>
      div#rating {
        background-color: #eeeeee;
        width: 200px;
        height: 500px;
        border-radius: 20px;
      }
    </style>
  </head>
  <body>
    <div >
      <img  src="star_checked.png" alt="" width="100" height="100">
      <img  src="star_checked.png" alt="" width="100" height="100">
      <img  src="star.png" alt="" width="100" height="100">
      <img  src="star.png" alt="" width="100" height="100">
      <img  src="star.png" alt="" width="100" height="100">
    </div>
  </body>
</html>

Here are my images: White Star Yellow Star

CodePudding user response：

Here is the same scenario you're trying https://codepen.io/Leoschmittk/pen/RwoQYBO