title: Make CSS star rating dynamic
body: <p>The below code pen project consists of a pure css star rating interface.
  <a href="https://codepen.io/yaworek/pen/JJpEaZ" rel="nofollow noreferrer">https://codepen.io/yaworek/pen/JJpEaZ</a></p>
  
  <p>Below is the css part:</p>
  
  <pre><code>/***
   *  Simple Pure CSS Star Rating Widget Bootstrap 4 
   * 
   *  www.TheMastercut.co
   *  
   ***/
  
  @import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
  
  /* Styling h1 and links
  ––––––––––––––––––––––––––––––––– */
  h1[alt="Simple"] {color: white;}
  a[href], a[href]:hover {color: grey; font-size: 0.5em; text-decoration: none}
  
  .starrating &gt; input {display: none;}  /* Remove radio buttons */
  
  .starrating &gt; label:before { 
    content: "\f005"; /* Star */
    margin: 2px;
    font-size: 2em;
    font-family: FontAwesome;
    display: inline-block; 
    text-shadow: 0px 0px 3px #000;
  }
  
  .starrating &gt; label
  {
    color: #FFFFFF; /* Start color when not clicked */
  }
  
  .starrating &gt; input:checked ~ label
  { color: #ffca08 ; } /* Set yellow color when star checked */
  
  .starrating &gt; input:hover ~ label
  { color: #ffca08 ;  } /* Set yellow color when star hover */
  </code></pre>
  
  <p>It uses radio buttons and css to display the rating. I want to add additional rating sets on this. I want to add more rating sets like 5 rating sets for 5 books. Now the problem is, the css implementation resets the selected rating for one set while selecting rating for another set.</p>
  
  <p>Below is the code pen link for an additional rating set that I have added. The problem is when I select rating for second set, the rating for first set is removed.
  <a href="https://codepen.io/brainyprb/pen/BvoqLE" rel="nofollow noreferrer">https://codepen.io/brainyprb/pen/BvoqLE</a></p>
  
  <p>Is this solvable using css only ? or will I have to use javascript/jquery for this ?</p>