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>
<button onclick="alert(myElement.getSelectedRows())">Show selected row ids</button>

CSS

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

JavaScript

function bindMultipleSelect(element){
    var self = this;
    var isCtrlDown = false;
    element.on('click', 'tr', function(){
        var tr = $(this);
        if(!isCtrlDown)
            return;
        tr.toggleClass('ui-selected')
    })
    $(document).on('keydown', function(e){
        isCtrlDown = (e.which === 17)
    });
    $(document).on('keyup', function(e){
        isCtrlDown = !(e.which === 17)
    });
    self.getSelectedRows = function(){
        var arr = [];
        element.find('.ui-selected').each(function(){
            arr.push($(this).find('td').eq(0).text())
        })
        return arr;
    }
    return self;
}

window.myElement = bindMultipleSelect($('#tableStudent'))