php - JQuery 5 star rating system -

i'm creating 5 star rating system html php , jquery dont know how stop stars rating when user has clicked on rating. in code when user click on 4 stars alert box shows 4 stars when user move mouse stars stars shows 0 rating.

here code, i'm not posting css here

html :

<div class="rating">     <div class="ratings_stars" data-rating="1"></div>     <div class="ratings_stars" data-rating="2"></div>     <div class="ratings_stars" data-rating="3"></div>     <div class="ratings_stars" data-rating="4"></div>     <div class="ratings_stars" data-rating="5"></div>  </div> 

jquery :

$('.ratings_stars').hover(     // handles mouseover     function() {         $(this).prevall().andself().addclass('ratings_over');         $(this).nextall().removeclass('ratings_vote');      },     // handles mouseout     function() {         $(this).prevall().andself().removeclass('ratings_over');      } );    $('.ratings_stars').click(function() {    $('.ratings_stars').removeclass('selected'); // removes selected class of them    $(this).addclass('selected'); // adds selected class 1 clicked     var rating = $(this).data('rating');    alert(rating);     // rating selected star    $('#rating').val(rating); // set value of hidden rating form element }); 

guessing because haven't said expect happen. want selected rating, , stars before it, highlighted.

so instead of this

$(this).addclass('selected'); 

you use this, similar how have previously.

$(this).prevall().andself().addclass('selected'); 

but remove hover class it's obvious user on click

$(this).prevall().andself().addclass('selected').removeclass('ratings_over');  

demo