JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tr>
<th>Major</th>
<th>Rating</th>
<th>Your Score</th>
<th>Average</th>
<th>Total Votes</th>
</tr>
<tr>
<td><a href="#">Applied Sciences in Engineering</a></td>
<td><fieldset class="rating" id="1">
<span class="rater"><input type="radio" name="stars" id="4_stars" value="5" >
<label class="stars" for="4_stars">4 stars</label>
<input type="radio" name="stars" id="3_stars" value="4" >
<label class="stars" for="3_stars">3 stars</label>
<input type="radio" name="stars" id="2_stars" value="3" >
<label class="stars" for="2_stars">2 stars</label>
<input type="radio" name="stars" id="1_stars" value="2" >
<label class="stars" for="1_stars">1 star</label>
<input type="radio" name="stars" id="0_stars" value="1" required>
<label class="stars" for="0_stars">0 star</label>
</fieldset></td>
<td id="lets">0</td>
<td id="see">0</td>
<td id="money">0</td>
</tr>
<tr>
<td><a href="#">Electrial and Computer Engineering</a></td>
<td id="1"><fieldset class="rating" id="2">
<span class="1"><input type="radio" name="stars1" id="4_stars" value="5" >
<label class="stars" for="4_stars1">4 stars</label>
<input type="radio" name="stars" id="3_stars1" value="4" >
<label class="stars" for="3_stars1">3 stars</label>
<input type="radio" name="stars" id="2_stars1" value="3" >
<label class="stars" for="2_stars1">2 stars</label>
<input type="radio" name="stars" id="1_stars1" value="2" >
<label class="stars" for="1_stars1">1 star</label>
<input type="radio" name="stars" id="0_stars1" value="1" required>
<label class="stars" for="0_stars1">0 star</label>
</fieldset></td>
<td id="take">0</td>
<td id="two">0</td>
<td id="times">0</td>
</tr>
</table>
CSS
.rating {
width: 200px;
height: 34px;
background-color: #f6f3f3;
}
.rating label {
text-indent: -100px;
width: 40px !important;
height: 30px;
overflow: hidden;
cursor: pointer;
}
.label {
float: left;
padding-top: 3px;
}
input[type="radio"] {
padding-right: 4px;
position: absolute;
left: 340px;
margin-top: 10px;
visibility: hidden;
}
input[type="radio"], .rating label.stars {
float: right;
line-height: 30px;
height: 30px;
}
span + input[type=radio] + label, legend + input[type=radio] + label {
clear: right;
margin-right: 80px;
counter-reset: checkbox;
}
.rating label.stars {
background: transparent url('http://www.findsourcecode.com/wp-content/uploads/2014/04/star_off.png') no-repeat center center;
}
.rating label.stars:hover ~ label.stars,
.rating label.stars:hover,
.rating input[type=radio][name=stars]:checked ~ label.stars {
background-image: url('http://www.findsourcecode.com/wp-content/uploads/2014/04/star.png');
counter-increment: checkbox;
}
.rating input[type=radio][name=stars]:required + label.stars:after {
content: counter(checkbox) " stars!";
}
JavaScript
$(document).ready(function(){
// Check Radio-box
var counter = 1;
var counterb=1;
var total = 0;
var average = 0;
var averageb=0;
var radio = "";
/*$(".rating .stars").click(function(event) {
var radio = event.target.value;
alert(radio);
});*/
$("input").change(function(event){
radio = event.target.id;
alert(radio);
});
$(".rating input:radio").attr("checked", false);
$('.form option').click(function () {
$(".rating").removeClass('checked');
$(this).parent().addClass('checked');
});
$('input:radio').change(
function(){
var userRating = this.value;
total += parseFloat(userRating);
//alert(total + ', ' + counter+', ' + average + ', '+userRating);
if(radio=="4_stars"||radio=="3_stars"||radio=="2_stars"||radio=="1_stars"||radio=="0_stars"){
counter = counter+1;
average = total/counter;
document.getElementById("lets").innerHTML =userRating;
document.getElementById("see").innerHTML = average;
document.getElementById("money").innerHTML = counter;
}
if(radio=="4_stars1"||radio=="3_stars1"||radio=="2_stars1"||radio=="1_stars1"||radio=="0_stars1"){
counterb = counterb+1;
averageb = total/counterb;
document.getElementById("take").innerHTML =userRating;
document.getElementById("two").innerHTML = averageb;
document.getElementById("times").innerHTML = counterb;
}
});
});