JSFiddle - React, Tailwind, and code Playground

HTML

<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"></div>
        <div class="scale"></div>
        <div class="scale"></div>
        <div class="scale"></div>
        <div class="scale"></div>
      </td>
      <td>Comment</td>
    </tr>
    <tr>
      <td>Question 2</td>
      <td width="300px">
        <div class="scale-text">No Rating</div>
        <div class="scale"></div>
        <div class="scale"></div>
        <div class="scale"></div>
        <div class="scale"></div>
        <div class="scale"></div>
      </td>
      <td>Comment</td>
    </tr>
  </tbody>
  <table>

CSS

.scale {
  background-color: tomato;
  width: 20px;
  height: 20px;
  float: left;
  margin-left: 5px;
}

JavaScript

$(function() {
      $('.scale').hover(function() {
        var $previous = $(this);
        while ($previous.length && $previous.hasClass('scale')) {
          $previous.css('background-color', 'yellow');
          $previous = $previous.prev();
        }
      }, function() {
        var $previous = $(this);
        while ($previous.length && $previous.hasClass('scale')) {
          $previous.css('background-color', '');
          $previous = $previous.prev();
        }
      })
    });