title: How to ensure one radio form does not check another radio form
body: <p>I've found a pure CSS star rating system however with the given code I can only use one star system per page. I've tried changing the class names but unfortunately the second star rating form checks the first star rating form when pressed. Is there any way around this?</p>
  
  <pre><code>.rating { 
    border: none;
    float: left;
  }
  
  .rating &gt; input { display: none; } 
  .rating &gt; label:before { 
    margin: 5px;
    font-size: 1.25em;
    font-family: FontAwesome;
    display: inline-block;
    content: "\f005";
  }
  
  .rating &gt; .half:before { 
    content: "\f089";
    position: absolute;
  }
  
  .rating &gt; label { 
    color: #ddd; 
   float: right; 
  }
  
  /***** CSS Magic to Highlight Stars on Hover *****/
  
  .rating &gt; input:checked ~ label, /* show gold star when clicked */
  .rating:not(:checked) &gt; label:hover, /* hover current star */
  .rating:not(:checked) &gt; label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */
  
  .rating &gt; input:checked + label:hover, /* hover current star when changing rating */
  .rating &gt; input:checked ~ label:hover,
  .rating &gt; label:hover ~ input:checked ~ label, /* lighten current selection */
  .rating &gt; input:checked ~ label:hover ~ label { color: #FFED85;  } 
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;form class="form-class" id="starform"&gt;               
     &lt;fieldset class="rating"&gt;
           &lt;input type="radio" id="star2" name="rating" value="2"/&gt;
           &lt;label class="full" for="star2" title="2 stars"&gt;&lt;/label&gt;
  
           &lt;input type="radio" id="star1" name="rating" value="1"/&gt; 
           &lt;label class="full" for="star1" title="1 star"&gt;&lt;/label&gt;
     &lt;/fieldset&gt;
  &lt;/form&gt;
  
  &lt;form class="form-class" id="starformtwo"&gt;               
         &lt;fieldset class="ratingtwo"&gt;
               &lt;input type="radio" id="star2-2" name="ratingtwo" value="2"/&gt;
               &lt;label class="full" for="star2-2" title="2 stars"&gt;&lt;/label&gt;
  
               &lt;input type="radio" id="star1-2" name="ratingtwo" value="1"/&gt; 
               &lt;label class="full" for="star1-2" title="1 star"&gt;&lt;/label&gt;
         &lt;/fieldset&gt;
      &lt;/form&gt;
  </code></pre>