Star rating System, Give unique rating
<p>I am using Star system to rate some films from database, i am adding those films in a while loop, and stars along with each film.</p>

<p>I want the user to give the unique rating to each film, like if the user has given five stars to one film then if he try to give the five five stars again to some other film , there must be some indication to show
 turn the stars from yellow to red, before submitting the the rating. Can someone give me some samples.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.star-rating {
  font-size: 0;
  white-space: nowrap;
  display: inline-block;
  /* width: 250px; remove this */
  height: 50px;
  overflow: hidden;
  position: relative;
  background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
  background-size: contain;
}
.star-rating i {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  /* width: 20%; remove this */
  z-index: 1;
  background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZERjg4IiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
  background-size: contain;
}
.star-rating input {
  -moz-appearance: none;
  -webkit-appearance: none;
  opacity: 0;
  display: inline-block;
  /* width: 20%; remove this */
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 2;
  position: relative;
}
.star-rating input:hover + i,
.star-rating input:checked + i {
  opacity: 1;
}
.star-rating i ~ i {
  width: 40%;
}
.star-rating i ~ i ~ i {
  width: 60%;
}
.star-rating i ~ i ~ i ~ i {
  width: 80%;
}
.star-rating i ~ i ~ i ~ i ~ i {
  width: 100%;
}
 ::after,
 ::before {
  height: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-align: center;
  vertical-align: middle;
}
.star-rating.star-5 {
  width: 250px;
}
.star-rating.star-5 input,
.star-rating.star-5 i {
  width: 20%;
}
.star-rating.star-5 i ~ i {
  width: 40%;
}
.star-rating.star-5 i ~ i ~ i {
  width: 60%;
}
.star-rating.star-5 i ~ i ~ i ~ i {
  width: 80%;
}
.star-rating.star-5 i ~ i ~ i ~ i ~i {
  width: 100%;
}
.star-rating.star-3 {
  width: 150px;
}
.star-rating.star-3 input,
.star-rating.star-3 i {
  width: 33.33%;
}
.star-rating.star-3 i ~ i {
  width: 66.66%;
}
.star-rating.star-3 i ~ i ~ i {
  width: 100%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form method="get" action="" id="form1"&gt;
  &lt;span class="star-rating star-5"&gt;
          &lt;input type="radio" name="rating" value="1"&gt;&lt;i&gt;&lt;/i&gt;
          &lt;input type="radio" name="rating" value="2"&gt;&lt;i&gt;&lt;/i&gt;
          &lt;input type="radio" name="rating" value="3"&gt;&lt;i&gt;&lt;/i&gt;
          &lt;input type="radio" name="rating" value="4"&gt;&lt;i&gt;&lt;/i&gt;
          &lt;input type="radio" name="rating" value="5"&gt;&lt;i&gt;&lt;/i&gt;
        &lt;/span&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>

<p>Further i will store the rating using PHP, once this problem resolves.
Below is the code that i am using.</p>

<p>Thanks for any Help :-)``</p>