title: How can I separate these two rating bar in this situation css php html?
body: <p>look at the code and run it, I have two bar rating in the same page. As you can see, the second bar rating mess up with the first one, how can I separate them. I had tried to assign different id, and try the different class, fail too. What can I do? Appreciate.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.rating {
      float:left;
  }
  
     
  .rating:not(:checked) &gt; input {
      position:absolute;
      left:-9999px;
      clip:rect(0,0,0,0);
  }
  
  #rating_1:not(:checked) &gt; label {
      float:right;
      width:9px;
   padding:0 .1em 0 0;
   border-left:.1em solid #fff;/* make space between content*/
   overflow:hidden;
      white-space:nowrap;
      cursor:pointer;
      font-size:200%;
      line-height:0.9;
      text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5);
  }
  
  #rating_1:not(:checked) &gt; label:before {
      content:'\00a0 \00a0 \00a0 ';
      background-color: #c7c5c5;
      -webkit-border-radius: 1px;
      -moz-border-radius: 1px;
      border-radius: 1px; 
  }
  
  #rating_1 &gt; input:checked ~ label:before {
   content:'\00a0 \00a0 \00a0 ';
   background-color: #4bce32;
  }
  
  #rating_1:not(:checked) :hover ~ label:before {
  content:'\00a0 \00a0 \00a0 ';
  background-color: #4bce32;
  
  }
  
  /* second rating*/
  #diet_voting #rating_2:not(:checked) &gt; label {
      float:right;
      width:9px;
   padding:0 .1em 0 0;
   border-left:.1em solid #fff;/* make space between content*/
   overflow:hidden;
      white-space:nowrap;
      cursor:pointer;
      font-size:200%;
      line-height:0.9;
      text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5);
  }
  
  #diet_voting #rating_2:not(:checked) &gt; label:before {
      content:'\00a0 \00a0 \00a0 ';
      background-color: #c7c5c5;
      -webkit-border-radius: 1px;
      -moz-border-radius: 1px;
      border-radius: 1px; 
  }
  
  #diet_voting #rating_2 &gt; input:checked ~ label:before {
   content:'\00a0 \00a0 \00a0 ';
   background-color: #4bce32;
  }
  
  #diet_voting #rating_2:not(:checked) :hover ~ label:before {
  content:'\00a0 \00a0 \00a0 ';
  background-color: #4bce32;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="user_voting" id="faith_voting"&gt;  
    &lt;fieldset class="rating" id="rating_1"&gt;
        &lt;legend&gt;Effective:&lt;/legend&gt;
        &lt;input type="radio" id="star5" name="rating" value="5" /&gt;&lt;label for="star5" title="Rocks!"&gt;5 stars&lt;/label&gt;
        &lt;input type="radio" id="star4" name="rating" value="4" /&gt;&lt;label for="star4" title="Pretty good"&gt;4 stars&lt;/label&gt;
        &lt;input type="radio" id="star3" name="rating" value="3" /&gt;&lt;label for="star3" title="Meh"&gt;3 stars&lt;/label&gt;
        &lt;input type="radio" id="star2" name="rating" value="2" /&gt;&lt;label for="star2" title="Kinda bad"&gt;2 stars&lt;/label&gt;
        &lt;input type="radio" id="star1" name="rating" value="1" /&gt;&lt;label for="star1" title="Sucks big time"&gt;1 star&lt;/label&gt;
    &lt;/fieldset&gt;   
    &lt;/div&gt;
  
   &lt;div class="user_voting" id="diet_voting"&gt;
    &lt;fieldset class="rating" id="rating_2"&gt;
        &lt;legend&gt;Effective:&lt;/legend&gt;
        &lt;input type="radio" id="star5_2" name="rating_2" value="5" /&gt;&lt;label for="star5" title="Rocks!"&gt;5 stars&lt;/label&gt;
        &lt;input type="radio" id="star4_2" name="rating_2" value="4" /&gt;&lt;label for="star4" title="Pretty good"&gt;4 stars&lt;/label&gt;
        &lt;input type="radio" id="star3_2" name="rating_2" value="3" /&gt;&lt;label for="star3" title="Meh"&gt;3 stars&lt;/label&gt;
        &lt;input type="radio" id="star2_2" name="rating_2" value="2" /&gt;&lt;label for="star2" title="Kinda bad"&gt;2 stars&lt;/label&gt;
        &lt;input type="radio" id="star1_2" name="rating_2" value="1" /&gt;&lt;label for="star1" title="Sucks big time"&gt;1 star&lt;/label&gt;
    &lt;/fieldset&gt;
        &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>