JSFiddle - React, Tailwind, and code Playground
HTML
<table border="1px">
<tr>
<td><b>below 20</b></td>
<td width="100" class="bg_status"> 19 </td>
</tr>
<tr>
<td><b>from 20</b></td>
<td class="bg_status"> 20 </td>
</tr>
<tr>
<td><b>to 39</b></td>
<td class="bg_status"> 39 </td>
</tr>
<tr>
<td><b>above 40</b></td>
<td class="bg_status"> 40 </td>
</tr>
<tr>
<td colspan="2"><b>render the different colours in above cells only if the</b></td>
</tr>
<tr>
<td><b>value in the following cell is different from 20 : </b></td>
<td class="avai"> 20 </td>
</tr>
<table />
JavaScript
// JavaScript Document
var cell = $('td.bg_status');
var diff = $('td.avai').html();
cell.each(function() {
var cell_value = $(this).html();
if(diff != 20) {
if ((cell_value >= 0) && (cell_value <=19)) {
$(this).css({'background' : '#FF9900'});
} else if ((cell_value >= 20) && (cell_value <=39)) {
$(this).css({'background' : '#99cc00'});
} else if (cell_value >= 40) {
$(this).css({'background' : '#99ccff'});
}
}
});