JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<table>
<thead>
<tr>
<td>Overall</td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td>Question 1</td>
<td width="300px">
<div class="scale-text">No Rating</div>
<div class="scale" data-value="1"></div>
<div class="scale" data-value="2"></div>
<div class="scale" data-value="3"></div>
<div class="scale" data-value="4"></div>
<div class="scale" data-value="5"></div>
</td>
<td>Comment</td>
</tr>
<tr>
<td>Question 2</td>
<td width="300px">
<div class="scale-text"></div>
<div class="scale" data-value="1"></div>
<div class="scale" data-value="2"></div>
<div class="scale" data-value="3"></div>
<div class="scale" data-value="4"></div>
<div class="scale" data-value="5"></div>
</td>
<td>Comment</td>
</tr>
</tbody>
<table>
CSS
.scale {
background-color: #222;
width: 10px;
height: 10px;
margin: 10px;
}
JavaScript
var frases = ["Strongly Disagree", "Disagree", "Neutral", "Agree", "Strongly agree"];
$('.scale').hover(function() {
$(this).prevAll('.scale').css('background-color', 'yellow').end().css('background-color', 'yellow');
$(this).prevAll('.scale-text').html(frases[$(this).data('value')-1]);
}, function() {
// on mouseout, reset the background colour
$(this).prevAll('.scale').css('background-color', '').end().css('background-color', '');
$(this).prevAll('.scale-text').html("No Rating");
});