JSFiddle - React, Tailwind, and code Playground

HTML

<table id="demo-table">
    <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 rowspan="2"></td>
        <td rowspan="2"></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

CSS

table, table tr {
    border: none;
}
table td {
    border: 1px;
    background: #ccc;
    padding: 0px;
    width: 60px;
    height: 28px;
}
table td.cell {
    height: 60px;
}
table td.selected {
    background: blue;
}

JavaScript

$('#demo-table td').on('click', function (event) {
    event.preventDefault();
    selectCell(this);
});

function selectCell(item){
    var cell = item.parentNode,
        table = cell.parentNode,
        rowPos = cell.rowIndex,
        colPos = item.cellIndex;
    
    $(table).find('td').removeClass('selected');
    
    for(r = rowPos; r < table.rows.length; r++) {
		for(c = colPos; c < table.rows[r].cells.length; c++) {
			jQuery(table.rows[r].cells[c]).addClass("selected");
		}
	}
    
    console.log(table);
}