<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>
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.checked {
background: orange;
color:#fff;
}
</style>
</head>
<body>
<div>
<table class="table table-bordered">
<tr><td class="item" id="star5" onmouseover="add(this,5)">1</td></tr>
<tr><td class="item" id="star4" onmouseover="add(this,4)">2</td></tr>
<tr><td class="item" id="star3" onmouseover="add(this,3)">3</td></tr>
<tr><td class="item" id="star2" onmouseover="add(this,2)">4</td></tr>
<tr><td class="item" id="star1" onmouseover="add(this,1)">5</td></tr>
</table>
</div>
<script>
function add(ths,sno){
for (var i=1;i<=5;i++){
var cur=document.getElementById("star"+i)
cur.className="item"
}
for (var i=1;i<=sno;i++){
var cur=document.getElementById("star"+i)
