JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<body>

<table id="productList">

<tr>
	<td>#1</td>
	<td>#2</td>
</tr>

<tr>
	<td>#3</td>
	<td>#4</td>
</tr>

</table>

<script>


$("#productList").on("mousedown", "td", function () {
	$("td").css("background", "");
	$(this).css("background", "red");
   //save from where to start
});

$("#productList").on("mouseover mouseenter mouseover hover", "td", function () {
	$(this).css("background", "yellow");
   //update highlighting, modify classes
   //this function isn't fired when I click on one of <td> and drag mouse somewhere else
});

</script>
</body>

CSS

#productList td{
	border: 1px solid grey;
	width: 200px;
	height: 50px;
}