JSFiddle - React, Tailwind, and code Playground

HTML

<div id="divScroll" style="overflow-x: hidden; width: 100%;height:300px;" class="cssdiv">
<table cellpadding="0" cellspacing="0" id="contentPlaceHolderMain_tableAppointment" width="100%"  border="1">
    <tr class="csstablelisttd">
        <td>Hour</td>      <td>Minute</td>
        <td>Student Name</td>
    </tr>
    <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>00</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>01</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>02</td>
    <td></td>
  </tr>
    <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>00</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>01</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>02</td>
    <td></td>
  </tr>
    <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>00</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>01</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>02</td>
    <td></td>
  </tr>
    <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>00</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>01</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>02</td>
    <td></td>
  </tr>
    <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>00</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>01</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>02</td>
    <td></td>
  </tr>
    <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>00</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>01</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>02</td>
    <td></td>
  </tr>
    <tr class="csstablelisttd">
    <td>8 PM</td>
    <td>00</td>
    <td></td>
  </tr>
  <tr class="csstablelisttd">
   ...

CSS

.csstablelisttd
{text-align: left;
color: #1B72A4;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
}
.csstdhighlight
		{
			background-color: #CCFFCC;
			color: Red;
			text-align: center;
			vertical-align: top;
			font-family: Verdana, Arial, Helvetica, sans-serif;
			font-weight: bold;
			font-size: 11px;
		}
.cssdiv
{
	/*border: 1px solid #CCCCCC;*/
	overflow: auto;
}

JavaScript

var flag=false;
$(document).live('mouseup', function () { flag = false; });
var colIndex; var lastRow;
$(document).on('mousedown', '.csstablelisttd', function (e)
 {
          //This line gets the index of the first clicked row.
					lastRow = $(this).closest("tr")[0].rowIndex;    
     
     var rowIndex = $(this).closest("tr").index();
					colIndex = $(e.target).closest('td').index();
     $(".csstdhighlight").removeClass("csstdhighlight");
     if (colIndex == 0 || colIndex == 1)//)0 FOR FULL TIME CELL AND 1 FOR TIME SLOT CELL. 
						return;
     if ($('#contentPlaceHolderMain_tableAppointment tr').eq(rowIndex).find('td').eq(colIndex).hasClass('csstdred') == false)
					{
						$('#contentPlaceHolderMain_tableAppointment tr').eq(rowIndex).find('td').eq(colIndex).addClass('csstdhighlight');

						flag = true;
						return false;
					}     
 });


document.onmousemove = function () { return false; };

$(".csstablelisttd").live('mouseenter', function (e)
 {
// Compares with the last and next row index.
					var currentRow = $(this).closest("tr")[0].rowIndex;
					var currentColoumn = $(e.target).closest('td').index();

					//cross row selection
					if (lastRow == currentRow || lastRow == currentRow - 1 || lastRow == currentRow + 1)
					{
						lastRow = $(this).closest("tr")[0].rowIndex;
					}
					else
					{
						flag = false;
						return;
					}
					//cross cell selection.
					if (colIndex != currentColoumn)
					{
						flag = false;
						return;
					}

					if (flag)
					{
						$('#contentPlaceHolderMain_tableAppointment tr').eq(currentRow).find('td').eq(currentColoumn).addClass('csstdhighlight');
						e.preventDefault();						
						return false;
					}                          
 });