JSFiddle - React, Tailwind, and code Playground

by Mahmoud Elmahdi

HTML

<div class="views-field-field-jtc-top">
  <input type="text" class="field-content" value="1" />
  <input type="text" class="field-content" value="2" />
  <input type="text" class="field-content" value="3" />
  <input type="text" class="field-content" value="4" />
</div>

SCSS

body { padding: 30px; }

.field-content {
  display: block;
  height: 20px;
  &.first-rating  { background-color: red; }
  &.twise-rating { background-color: green; }
  &.three-rating  { background-color: blue; }
  &.other-rating  { background-color: purple; }
}

JavaScript

$('.views-field-field-jtc-top .field-content').each(function(){
      if ($(this).val() == '1') {
        $(this).addClass('first-rating');
      } else if ($(this).val() == '2') {
        $(this).addClass('twise-rating');
      } else if ($(this).val() == '3') {
        $(this).addClass('three-rating');
      } else {
        $(this).addClass('other-rating');
      }
    });