оценка для новости

на странице есть звездный рейтинг:

<div class="rating pull-right">
   <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Превосходно!"><i class="fa fa-star-o" aria-hidden="true"></i></label>
   <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Довольно хорошо"><i class="fa fa-star-o" aria-hidden="true"></i></label>
   <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Тек себе, золотая середина!"><i class="fa fa-star-o" aria-hidden="true"></i></label>
   <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Можно было бы и лучше!"><i class="fa fa-star-o" aria-hidden="true"></i></label>
   <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Тихий ужас!"><i class="fa fa-star-o" aria-hidden="true"></i></label>
</div>
.rating {
    margin-top: 20px;
}
.box-body {
    min-height: 300px;
}
#respond {
    margin-top: 20px;
    padding-top: 60px;
}
.rating:not(:checked) > input {
    position:absolute;
    top:-9999px;
    clip:rect(0,0,0,0);
}
.rating:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:200%;
    line-height:1.2;
    color:#8cc5de;
}
.rating > input:checked ~ label {
    color: #0d181d;
}
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
    color: #35a5d6;
}
.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
    color: #35a5d6;
}
.rating > label:active {
    position:relative;
}

как сделать теперь чтоб этот рейтинг работал, т.е. мне нужно нажимая на звездочку выставлять оценку новости, и потом выводить среднюю оценку, как это можно сделать?