title: Star rating system - Issue with hover + click
body: <p>I have written a code for rating system star rating system basically, it was all working fine and good the code is </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  (function($){
  
     $(document).ready(function() {
      var $option = $('.option');
      var $fruit = $('.fruit-name');
      var $last;
      var parent
      $option.click(function() {
          parent=$(this).parents('.comment-form-rating');
          $('.fruit-name',parent).val(this.innerHTML)
      })
  
  
  $(".starr1").hover(function(){
      parent=$(this).parents('.comment-form-rating');
      $('.starr1',parent).css('color','gold')
      },function(){
      $(".starr1").css("color","#ddd");
    });
  
  
  $(".starr2").hover(function(){
      parent=$(this).parents('.comment-form-rating');
      $('.starr1',parent).css('color','gold')
      $('.starr2',parent).css('color','gold')
      },function(){
      $(".starr1").css("color","#ddd");
      $(".starr2").css("color","#ddd");
    });
  
  $(".starr3").hover(function(){
      parent=$(this).parents('.comment-form-rating');
      $('.starr1',parent).css('color','gold')
      $('.starr2',parent).css('color','gold')
      $('.starr3',parent).css('color','gold')
      },function(){
      $(".starr1").css("color","#ddd");
      $(".starr2").css("color","#ddd");
      $(".starr3").css("color","#ddd");
    });
  
  $(".starr4").hover(function(){
      parent=$(this).parents('.comment-form-rating');
      $('.starr1',parent).css('color','gold')
      $('.starr2',parent).css('color','gold')
      $('.starr3',parent).css('color','gold')
      $('.starr4',parent).css('color','gold')
      },function(){
      $(".starr1").css("color","#ddd");
      $(".starr2").css("color","#ddd");
      $(".starr3").css("color","#ddd");
      $(".starr4").css("color","#ddd");
    });
  
  $(".starr5").hover(function(){
      parent=$(this).parents('.comment-form-rating');
      $('.starr1',parent).css('color','gold')
      $('.starr2',parent).css('color','gold')
      $('.starr3',parent).css('color','gold')
      $('.starr4',parent).css('color','gold')
      $('.starr5',parent).css('color','gold')
      },function(){
      $(".starr1").css("color","#ddd");
      $(".starr2").css("color","#ddd");
      $(".starr3").css("color","#ddd");
      $(".starr4").css("color","#ddd");
      $(".starr5").css("color","#ddd");
    });
  
  });
  
  })(jQuery);
  &lt;/script&gt;
  </code></pre>
  
  <p>but then I have to define a click function for my stars that when user click on star 5 make all star red color --</p>
  
  <p>I defined it like this </p>
  
  <pre><code>$(".starr5").click(function () {
      parent = $(this).parents('.comment-form-rating');
      $('.starr1', parent).css('color', '#FF7777')
      $('.starr2', parent).css('color', '#FF7777')
      $('.starr3', parent).css('color', '#FF7777')
      $('.starr4', parent).css('color', '#FF7777')
      $('.starr5', parent).css('color', '#FF7777')
  }); 
  </code></pre>
  
  <p>Here's where the Problem occurs - now star become red but on mouse left they become gray again and on mouse over the yellow function of hover starts working - totatly confused How to write further code making it work.</p>