5 stars rating script

5 stars rating script

I'm writing 5 stars rating script, but hes doesn't work properly, when cursor is on star he changes, but when you go on other star, what previous star is unselecting i need all stars go to select one by one like in normal ratings system. 

$('.fa-star-o').mouseover(function() { $(this).removeClass('fa-star-o'); $(this).addClass('fa-star'); }).mouseout(function() { $(this).removeClass('fa-star'); $(this).addClass('fa-star-o'); }); <div class="companies-list-item-rating">       <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> </div><!-- /.companies-list-item -->

Script in fiddle https://jsfiddle.net/8o4cL1o1/10/