rating bar

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style>
.checked {
    color: orange;
}
</style>


<!-- 

CREATE TABLE ratings(
 id int not null PRIMARY KEY AUTO_INCREMENT,
 rating_value varchar(100) not null,
 created_at timestamp,
 updated_at timestamp
)

-->

<!-- success message here -->

<span id="subscription_msg"></span>

<!-- onclick insert value | check avarage value count from database. if match or less than then checked. -->

<span value="32" class="fa fa-star <?php if($avg == 1 || $avg > 1){ echo 'checked'; } ?>" id="1" onclick="rate(this)"></span>
<span value="32" class="fa fa-star <?php if($avg == 2 || $avg > 2){ echo 'checked'; } ?>" id="2" onclick="rate(this)"></span>
<span value="32" class="fa fa-star <?php if($avg == 3 || $avg > 3){ echo 'checked'; } ?>" id="3" onclick="rate(this)"></span>
<span value="32" class="fa fa-star <?php if($avg == 4 || $avg > 4){ echo 'checked'; } ?>" id="4" onclick="rate(this)"></span>
<span value="32" class="fa fa-star <?php if($avg == 5){ echo 'checked'; } ?>" id="5" onclick="rate(this)"></span>

<script>
	function rate(data){

		rate = $(data).attr('id');
		product_id = $(data).attr('value');
		$("#1,#2,#3,#3,#4,#5").removeClass("checked");
		i = 1;
		for(i;i<=rate;i++){
			document.getElementById(i).style.color = "orange";
        }

        if(rate != ""){
          $.ajax({
            type: "get",
            url: "{{ url('add_rating') }}",
            dataType: "json",
            data:{ rate_value:rate },
            success: function(data) {
            	$("#subscription_msg").text(data.message);
            },
            error: function(data) {
            	console.log('n ok');
            }
          });
        }

    }

</script>



________________________________



Route::get('add_rating',function(Request $request){
	//echo $request->rate_value;
	$rating 				= new rating;
	$rating->rating_value 	= $request->rate_value;
    $rating->save();

    $feedback = [
        'status' => 'success',
        'message' => 'thanks for feedback'
    ];
    echo json_encode($feedback);

});


___________________________________



Route::get('/', function () {
	$avg = rating::avg('rating_value');
    return view('search',compact('avg'));
});