JAVASCRIPT

rating star jquery

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">.bigstar{font-size: 24px;}</style>

<span class="fa fa-star" id="star1"></span>
<span class="fa fa-star" id="star2"></span>
<span class="fa fa-star" id="star3"></span>
<span class="fa fa-star" id="star4"></span>
<span class="fa fa-star" id="star5"></span>

<script type="text/javascript">
	$(document).ready(function(){
		$("#star1").click(function(){
			$(".fa-star").css("color","black").removeClass("bigstar");
			$("#star1").css("color","green");
			$(this).addClass("bigstar");
		});
		$("#star2").click(function(){
			$(".fa-star").css("color","black").removeClass("bigstar");
			$("#star1,#star2").css("color","green");
			$(this).addClass("bigstar");
		});
		$("#star3").click(function(){
			$(".fa-star").css("color","black").removeClass("bigstar");
			$("#star1,#star2,#star3").css("color","green");
			$(this).addClass("bigstar");
		});
		$("#star4").click(function(){
			$(".fa-star").css("color","black").removeClass("bigstar");
			$("#star1,#star2,#star3,#star4").css("color","green");
			$(this).addClass("bigstar");
		});
		$("#star5").click(function(){
			$(".fa-star").css("color","black").removeClass("bigstar");
			$("#star1,#star2,#star3,#star4,#star5").css("color","green");
			$(this).addClass("bigstar");
		});
	});
</script>