<h1>Our <i class="fa-regular fa-star"></i>/<i class="fa-solid fa-star"></i> Rating System</h1>

<div class="all-rating-widgets">

<div class="rating-wrapper" data-id="raiders">

  <h2>Raiders of the Lost Ark</h2>

  <div class="star-wrapper">

    <i class="fa-regular fa-star"></i>

    <i class="fa-regular fa-star"></i>

    <i class="fa-regular fa-star"></i>

    <i class="fa-regular fa-star"></i>

    <i class="fa-regular fa-star"></i>

  </div>

  <p class="v-data">Voting Data</p>

</div>

​

<div class="rating-wrapper" data-id="shawshank">

  <h2>Shawshank Redemption</h2>

  <div class="star-wrapper">

    <i class="fa-regular fa-star"></i>

    <i class="fa-regular fa-star"></i>

    <i class="fa-regular fa-star"></i>

    <i class="fa-regular fa-star"></i>

    <i class="fa-regular fa-star"></i>

  </div>

  <p class="v-data">Voting Data</p>

</div>

</div>

body {

  margin: 20px auto;

  font-family: "Lato";

  font-weight: 300;

}

​

h1 {

  text-align: center;

  font-size: 2.75rem;

}

​

div.all-rating-widgets {

  display: flex;

  justify-content: center;

}

​

div.rating-wrapper {

  display: flex;

  align-items: first baseline;

  flex-direction: column;

  margin: 5rem;

  font-size: 1.5rem;

}

​

div.star-wrapper {

  font-size: 2rem;

}

​

div.star-wrapper i {

  cursor: pointer;

}

​

div.star-wrapper i.yellow {

  color: #fdd835;

}

​

div.star-wrapper i.vote-recorded {

  color: #f57c00;

}

​

p.v-data {

  background: #ccc;

  padding: 0.5rem;

}

​

$("div.star-wrapper i").on("mouseover", function () {

  if ($(this).siblings("i.vote-recorded").length == 0) {

    $(this)

      .prevAll()

      .addBack()

      .addClass("fa-solid yellow")

      .removeClass("fa-regular");

    $(this).nextAll().removeClass("fa-solid yellow").addClass("fa-regular");

  }

});

​

$("div.star-wrapper i").on("click", function () {

  let rating = $(this).prevAll().length + 1;

  let movie_id = $(this).closest("div.rating-wrapper").data("id");

  if ($(this).siblings("i.vote-recorded").length == 0) {

    $(this).prevAll().addBack().addClass("vote-recorded");

    $.post("update_ratings.php", { movie: movie_id, rating: rating }).done(

      function (data) {

        parent_div.find("p.v-data").text(data);

      }

    );

  }

});

​