JSFiddle - React, Tailwind, and code Playground

HTML

<table>
	<tr>
		<td>
			<div class="cell" x="1" y="1"></div>
		</td>
		<td>
			<div class="cell" x="2" y="1"></div>
		</td>
		<td>
			<div class="cell" x="3" y="1"></div>
		</td>
		<td>
			<div class="cell" x="4" y="1"></div>
		</td>
		<td>
			<div class="cell" x="5" y="1"></div>
		</td>
		<td>
			<div class="cell" x="6" y="1"></div>
		</td>
		<td>
			<div class="cell" x="7" y="1"></div>
		</td>
		<td>
			<div class="cell" x="8" y="1"></div>
		</td>
		<td>
			<div class="cell" x="9" y="1"></div>
		</td>
		<td>
			<div class="cell" x="10" y="1"></div>
		</td>
	</tr>
	<tr>
		<td>
			<div class="cell" x="1" y="2"></div>
		</td>
		<td>
			<div class="cell" x="2" y="2"></div>
		</td>
		<td>
			<div class="cell" x="3" y="2"></div>
		</td>
		<td>
			<div class="cell" x="4" y="2"></div>
		</td>
		<td>
			<div class="cell" x="5" y="2"></div>
		</td>
		<td>
			<div class="cell" x="6" y="2"></div>
		</td>
		<td>
			<div class="cell" x="7" y="2"></div>
		</td>
		<td>
			<div class="cell" x="8" y="2"></div>
		</td>
		<td>
			<div class="cell" x="9" y="2"></div>
		</td>
		<td>
			<div class="cell" x="10" y="2"></div>
		</td>
	</tr>
	<tr>
		<td>
			<div class="cell" x="1" y="3"></div>
		</td>
		<td>
			<div class="cell" x="2" y="3"></div>
		</td>
		<td>
			<div class="cell" x="3" y="3"></div>
		</td>
		<td>
			<div class="cell" x="4" y="3"></div>
		</td>
		<td>
			<div class="cell" x="5" y="3"></div>
		</td>
		<td>
			<div class="cell" x="6" y="3"></div>
		</td>
		<td>
			<div class="cell" x="7" y="3"></div>
		</td>
		<td>
			<div class="cell" x="8" y="3"></div>
		</td>
		<td>
			<div class="cell" x="9" y="3"></div>
		</td>
		<td>
			<div class="cell" x="10" y="3"></div>
		</td>
	</tr>
	<tr>
		<td>
			<div class="cell" x="1" y="4"></div>
		</td>
		<td>
			<div class="cell" x="2" y="4"></div>
		</td>
		<td>
			<div class="cell" x="3" y="4"></div>
		</td>
		<td>
			<div class="cell" x="4" y="4"></div>
		</td>
		<td>
			<div class="cell" x="5" y="4"></div>
		</td>
		<td>
			<div...

CSS

table {
	/*border: black 2px solid;*/
	margin: 50px;
	margin-bottom: 10px;
	border-collapse: collapse;
	cursor: default;
	display: inline-block;
	position: relative;
}

p {
	font-size: 20px;
	margin-left: 50px;
}

td {
	/*content: "&nbsp";*/
	border: #212121 2px solid;
	padding: 0;
}

.cell {
	background-color: #2196D3;
	min-width: 50px;
	min-height: 50px;
}
.cell:hover {
	background-color: #1976D2;
	cursor: pointer;
}

.ship {
	background-color: #B6B6B6;
}

JavaScript

$( ".cell" ).on( "click", function(){ 		
  			$(this).toggleClass('ship');
});