JSFiddle - React, Tailwind, and code Playground

HTML

<table id="tableStudent" border="1">
  <thead>
    <tr><th>ID</th><th>Name</th>                            <th>Class</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>John</td><td>4th</td></tr>
   <tr><td>2</td><td>Jack</td><td>5th</td></tr>
   <tr><td>3</td><td>Michel</td><td>6th</td></tr>
   <tr><td>4</td><td>Mike</td><td>7th</td></tr>
       <tr><td>5</td><td>Yke</td><td>8th</td></tr>
       <tr><td>6</td><td>4ke</td><td>9th</td></tr>
       <tr><td>7</td><td>7ke</td><td>10th</td></tr>
  </tbody>
</table>

CSS

body{font-size:62.5%;}
td { padding: 0.2em 0.4em; }
.ui-selecting, .ui-selected { background: lightBlue }

JavaScript

var studentIds = [];
$(window).on('keydown',(function()
{
	var expr = /\bui\-selected\b/i,
	target = $('tr'),
	root = $(window),
	clickCb = function(e)
	{
		if (!expr.test(this.className))
		{
			this.className += ' ui-selected';
            studentIds.push(+(this.cells[0].innerHTML));
		}
		else
		{
			this.className = this.className.replace(expr, '');
            for(var i=0;i<studentIds.length;i++)
            {
                if (studentIds[i] === +(this.cells[0].innerHTML))
                {
                    delete studentIds[i];
                    break;
                }
            }
		}
	},
	upCb = function(e)
	{
		target.off('click',clickCb);
        root.off('keyup', upCb);
		root.on('keydown',downCb);
        console.log(studentIds);
	},
	downCb = function(e)
	{
		if (e.which === 17)
		{
			root.off('keydown',downCb);
			root.on('keyup',upCb);
			target.on('click',clickCb);
		}
	};
	return downCb;
    
}()));