JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1">
	<tr>
		<td></td>
		<td>Banana</td>
		<td>Orange</td>
		<td>Plum</td>
	</tr>
	<tr>
		<td>Banana</td>
		<td>1:1</td>
		<td>1:2</td>
		<td>1:3</td>
	</tr>
	<tr>
		<td>Orange</td>
		<td>2:1</td>
		<td>1:1</td>
		<td>1,5:1</td>
	</tr>
	<tr>
		<td>Plum</td>
		<td>1:3</td>
		<td>2:1</td>
		<td>1:1</td>
	</tr>
</table>

CSS

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

td:hover{
    background-color:red;
}

JavaScript

document.addEventListener('DOMContentLoaded', function () {
        var tds = document.getElementsByTagName('td');
        for (var i = 0; i < tds.length; i++) {
            var elem = document.getElementsByTagName('td')[i];
            elem.addEventListener('mouseover', function () {
                var text = this.innerHTML;
                for (var j = 0; j < tds.length; j++) {
                    var elem2 = document.getElementsByTagName('td')[j];
                    if (elem2.innerHTML == text) {
                        elem2.style.background = 'red';
                    }
                }
            }, false);
            elem.addEventListener('mouseout', function () {
                for (var j = 0; j < tds.length; j++) {
                    var elem2 = document.getElementsByTagName('td')[j];
                    var text = this.innerHTML;
                    if (elem2.innerHTML == text) {
                        elem2.style.background = '';
                    }
                }
            }, false);
        }
    }, false);