JSFiddle - React, Tailwind, and code Playground
HTML
<table id="t1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
</table>
JavaScript
var COLORS=['red','green','blue'],
rows=document.querySelectorAll('#t1 tr'),
last_value,
color_index=-1,
change_index=true;
[].forEach.call(rows,function(row,index){
var val=row.querySelector('td:nth-child(2)').innerHTML;
if(val==last_value)
return change_index=([row,rows[index-1]].forEach(function(node){
node.style.backgroundColor=COLORS[color_index];
})||true);
if(change_index)
color_index=!COLORS[++color_index]?0:color_index;
change_index=false;
last_value=val;
});