JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1">
	<tr>
		<td></td>
		<td id='1'>Banana</td>
		<td id='2'>Orange</td>
		<td id='3'>Plum</td>
	</tr>
	<tr>
		<td>Banana</td>
		<td class='o1'>1:1</td>
		<td class='o2'>1:2</td>
		<td class='o3'>1:3</td>
	</tr>
	<tr>
		<td>Orange</td>
		<td class='o1'>2:1</td>
		<td class='o2'>1:1</td>
		<td class='o3'>1,5:1</td>
	</tr>
	<tr>
		<td>Plum</td>
		<td class='o1'>1:3</td>
		<td class='o2'>2:1</td>
		<td class='o3'>1:1</td>
	</tr>
</table>

CSS

td {
    height:60px;
    width:60px;
    text-align:center;
}

td:hover{
    background-color:red;
}

JavaScript

var cells1 = $('.o1');
cells1.on('mouseover', function(){
    $($(this).parent().children()[0]).css({background: '#ddd'})
    $('#1').css({background: '#ddd'})
})
cells1.on('mouseout', function(){
    $($(this).parent().children()[0]).css({background: 'none'})
    $('#1').css({background: 'none'})
})

var cells2 = $('.o2');
cells2.on('mouseover', function(){
    $($(this).parent().children()[0]).css({background: '#ddd'})
    $('#2').css({background: '#ddd'})
})
cells2.on('mouseout', function(){
    $($(this).parent().children()[0]).css({background: 'none'})
    $('#2').css({background: 'none'})
})

var cells3 = $('.o3');
cells3.on('mouseover', function(){
    $($(this).parent().children()[0]).css({background: '#ddd'})
    $('#3').css({background: '#ddd'})
})
cells3.on('mouseout', function(){
    $($(this).parent().children()[0]).css({background: 'none'})
    $('#3').css({background: 'none'})
})