<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.checked {
color: orange;
}
</style>
</head>
<body>
<h2>Star Rating</h2>
<span class="fa fa-star" id="star1" onclick="add(this,1)"></span>
<span class="fa fa-star" id="star2" onclick="add(this,2)"></span>
<span class="fa fa-star" id="star3" onclick="add(this,3)"></span>
<span class="fa fa-star" id="star4" onclick="add(this,4)"></span>
<span class="fa fa-star" id="star5" onclick="add(this,5)"></span>
<script>
function add(ths,sno){
for (var i=1;i<=5;i++){
var cur=document.getElementById("star"+i)
cur.className="fa fa-star"
}
for (var i=1;i<=sno;i++){
var cur=document.getElementById("star"+i)
if(cur.className=="fa fa-star")
