I'm trying to make simple five star rating system using Twitter Bootstrap 3 i jQuery. For now, I'm trying to set .hover() and .mouseout() events using counter by writing this code that doesn't work:

var i;
for (i = 1; i <= 5; i++) {
    $('#overall_rating_' + i).hover(function(){
        $('#overall_rating_' + i).removeClass("glyphicon-star-empty").addClass("glyphicon-star");
    });
    $('#overall_rating_' + i).mouseout(function(){
        $('#overall_rating_' + i).removeClass("glyphicon-star").addClass("glyphicon-star-empty");
    });
}

Trying to highlight current and previous stars on mouseover. The code is not complete, it would be accompanied by additional sub-counters, but this part doesn't work for now. Any better methods are welcome. What's broken here?