jQuery ile yıldızlı puanlama sistemi

Arkadaşlar biraz önce yaptığım sistem gerekirse puanı klasik form kullanıyorsanız hidden input içine yazdırabilirsiniz umarım işinize yarar.

var yp = jQuery(".yildiz-puanlama")
    var yp_i = jQuery(".yildiz-puanlama i")

    yp_i.mouseover(function(){
        var x = jQuery(this).index()
        yp_i.removeClass( "secili" )     
        for( i = x - 1; i >= 0; i-- ){
            yp_i.eq(i).addClass( "secili" )
        }
    })

    yp_i.mouseout(function(){
        var x = yp.attr( "data-puan" )
        yp_i.removeClass( "secili" )
        for( i = x - 1; i >= 0; i-- ){
            yp_i.eq(i).addClass( "secili" )
        }
    })
            
    yp_i.click(function(){
        var x = jQuery(this).index()
        yp.attr( "data-puan", x )
    })

<div class="yildiz-puanlama" data-puan="0">
<span>Puanla: </span>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>

Teşekkürler