JSFiddle - React, Tailwind, and code Playground

by Stephen Katulka

HTML

<table class="board" border="1">
	<tr>
		<td class="cell"></td>
		<td class="cell"></td>
		<td class="cell"></td>
		<td class="cell"></td>
		<td class="cell"></td>
	</tr>
	<tr>
		<td class="cell"></td>
		<td class="cell"></td>
		<td class="cell"></td>
		<td class="cell"></td>
		<td class="cell"></td>
	</tr>
	<tr>
		<td class="cell"></td>
		<td class="cell"></td>
		<td class="cell"></td>
		<td class="cell"></td>
		<td class="cell"></td>
	</tr>
	<tr>
		<td class="cell"></td>
		<td class="cell"></td>
		<td class="cell"></td>
		<td class="cell"></td>
		<td class="cell"></td>
	</tr>
	<tr>
		<td class="cell"></td>
		<td class="cell"></td>
		<td class="cell"></td>
		<td class="cell"></td>
		<td class="cell"></td>
	</tr>    
</table>

CSS

td {
    width:50px;
    height:50px;
    background-color:#ffffff;    
}

.red {
    background-color:red;
}

JavaScript

var getNear = function(cell) {
    var row = getRow(cell);
    var column = getCol(cell);
    var minrow = (row > 0) ? row - 1 : 0;
    var mincol = (column > 0) ? column - 1 : 0;
	var rows = $("table.board tr").slice(minrow, row+2);
    var cells = rows.find("td").filter(function (){
       var myCol = getCol($(this));
       return myCol >= mincol && myCol < column+2;
    });
	return cells.not(cell);
};

var getRow = function(cell) {
    return cell.parent().parent().children().index(cell.parent());
};

var getCol = function(cell) {
    return cell.parent().children().index(cell);
}

$(document).ready(function() {
    $(document).on("click", "td.cell", function (e){
        var cell = $(e.target);
        $("td.cell").removeClass("red");
        getNear($(this)).addClass("red");
    });
});