function starReplace1() {
    var rateStar = $(this).attr("id");
        reRatedrop();
    for (i = rateStar; i > -1; i--) {
        $('#' + i).removeClass('fa-star-o fa-lg');
        $('#' + i).addClass('fa-star fa-2x');
        }
    }
function starReplace2() {
    var rateStar = $(this).attr("id");
    for (i = rateStar; i > -2; i--) {
        $('#' + i).removeClass('fa-star fa-2x');
        $('#' + i).addClass('fa-star-o fa-lg');
        }
    reRatedrop();
    reRateadd();
    }

// The default rating for the question.

rateId = 0

// function ran when CLICKING a star

function setRateid () {
    rateId = $(this).attr("id");
}

function reRatedrop() {
    for (i = rateId; i > -1; i--) {
        $('#' + i).removeClass('fa-star fa-2x');
        $('#' + i).addClass('fa-star-o fa-lg');
        }
}

function reRateadd() {
    for (j = rateId; j > -1; j--) {
            $('#' + j).removeClass('fa-star-o fa-lg');
            $('#' + j).addClass('fa-star fa-2x');
            }
        }


function starRate() {
    if (rateId < $(this).attr("id")){
        rateId = $(this).attr("id");
        for (i = rateId; i > -1; i--) {
            $('#' + i).removeClass('fa-star-o fa-lg');
            $('#' + i).addClass('fa-star fa-2x');       }
        }
    else if (rateId > $(this).attr("id")){
        rateId = $(this).attr("id");
        reRatedrop();
        reRateadd();
        }
    else {
        rateId = 0
        for (i = rateId; i > -1; i--) {
            reRatedrop();
                    }
        }
}

function writeRatingstars() {
        for (i = 1; i < 6; i++) {
            $('.ratings-inner').append('<i id="' + i + '" class="fa fa-star-o fa-lg ratingglow"></i>');
        }
    }

// on document ready

$('body').on('mouseenter', '.ratingglow', starReplace1 );
$('body').on('mouseleave', '.ratingglow', starReplace2 );
$('body').on('click', '.ratingglow', starRate );