JSFiddle - React, Tailwind, and code Playground

HTML

<table class="lois_server_select lois_server_datatable sticky-enabled jquery-once-1-processed dataTable no-footer" id="lois_server_select" aria-describedby="lois_server_select_info" role="grid" columnfilterexcelon="on">
 <thead><tr role="row"><th class="sorting_disabled" rowspan="1" colspan="1" aria-label=""></th><th class="sorting_asc" tabindex="0" aria-controls="lois_server_select" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Name: activate to sort column ascending"><div class="columnFilterDivHeadCellLabel"><input type="text" value="Name" prevsearch="Name" class="text_filter search_init  input90" id="input_lois_server_select_excelbox_1" tid="lois_server_select"><span class="filter_column filter_text"></span></input></div><div class="columnFilterDivHeadCellOrder" id="ExcelSorting_lois_server_select_excelbox_1" tid="lois_server_select">&nbsp;</div></th><th class="sorting" tabindex="0" aria-controls="lois_server_select" rowspan="1" colspan="1" aria-label="IP Address: activate to sort column ascending"><div class="columnFilterDivHeadCellLabel"><input type="text" value="IP Address" prevsearch="IP Address" class="text_filter search_init  input90" id="input_lois_server_select_excelbox_2" tid="lois_server_select"><span class="filter_column filter_text"></span></input></div><div class="columnFilterDivHeadCellOrder" id="ExcelSorting_lois_server_select_excelbox_2" tid="lois_server_select">&nbsp;</div></th><th class="sorting" tabindex="0" aria-controls="lois_server_select" rowspan="1" colspan="1" aria-label="Admin teams: activate to sort column ascending" sid="lois_server_select_excelbox_3" tid="lois_server_select"><div tid="lois_server_select" sid="lois_server_select_excelbox_3" class="columnFilterDivHeadCellLabel"><span class="columnFilterExcelSearch" sid="lois_server_select_excelbox_3" id="ExcelSearch_lois_server_select_excelbox_3"></span><span tid="lois_server_select" sid="lois_server_select_excelbox_3" id="ExcelLabel_lois_server_select_excelbox_3">Admin...

CSS

#action_server_filter_result tr:hover,
#server_selected_result  tr:hover {
    cursor: pointer;
}

#action_history_result_table tr:hover,
#action_version_result_table tr:hover,
#action_server_filter_result tr:hover,
#server_selected_result tr:hover,
.lois_server_datatable tr:hover {
    cursor: pointer;
}

#action_server_filter_result tbody tr:hover, 
#action_server_filter_result tbody tr:hover td,
#action_server_filter_result tbody tr:hover td.sorting_1,
#action_server_filter_result tbody tr td.highlighted,
#action_server_filter_result tbody tr td.highlighted td.sorting_1,
#action_server_filter_result tr:hover,
#server_selected_result tr:hover,
.lois_server_datatable tbody tr:hover,
.lois_server_datatable tbody tr:hover td,
.lois_server_datatable tr:hover {
    background-color: #ECFFB3;
}

.dataTable input, 
.dataTable textarea, 
.dataTable select, 
.dataTable div, 
.dataTable span{
	font-size: 11px;
}

table.dataTable thead th.scroll, 
table.dataTable thead td.scroll {
    border: 1px solid #ffad43;
}

table.dataTable tr.clicked,
table.dataTable tr.clicked td,
table.dataTable tr.clicked td.sorting_1,
table.dataTable tr.clicked td.sorting_2,
table.dataTable tr.clicked td.sorting_3,
table.dataTable tr.clicked:hover,
table.dataTable tr.clicked:hover td,
table.dataTable tr.clicked:hover td.sorting_1,
table.dataTable tr.clicked:hover td.sorting_2,
table.dataTable tr.clicked:hover td.sorting_3{
    background-color: #D5FFD5;
}

JavaScript

_isMouseDown = false;
jQuery(document).on('mousedown',function(event) {
    _isMouseDown = true;
});
jQuery(document).on('mouseup',function(event) {
    _isMouseDown = false;
});


(function($) {
var sTableId = 'lois_server_select';
var aAvailableServerClicked = new Array();
var aServerSelectedClicked = new Array();

$('.lois_server_select tr').hover(
    function () {
        if(_isMouseDown == true){
            //exec onmousedown
            $(this).trigger('mousedown');
        }
    },function (){}
);    
$('.lois_server_select tr').bind('mousedown',function(evt) {
    console.log('this',this);
    var _that = $(this);
    var _checkbox = $(':checkbox',_that);
    console.log('checkbox',_checkbox);
    console.log('start checked:',_checkbox.attr('checked'));
    if(_checkbox.val() == undefined) return;
    
    console.log('checked:',_checkbox.prop('checked'));
    if(_that.hasClass('clicked')){
        //remove class
        _that.removeClass('clicked');
        //uncheck checkbox
        _checkbox.prop('checked',false);
        //remove to aAvailableServerClicked
        if(sTableId == 'lois_server_select'){
            aAvailableServerClicked.splice($.inArray(_checkbox.val(), aAvailableServerClicked),1);
        } else {
            aServerSelectedClicked.splice($.inArray(_checkbox.val(), aServerSelectedClicked),1);
        }
        
    } else {
        //add selected class
        _that.addClass('clicked');
        //check checkbox
        
        _checkbox.prop('checked',true);
        
        //add to aAvailableServerClicked
        if(sTableId == 'lois_server_select'){
            aAvailableServerClicked.push(_checkbox.val());
        } else {
            aServerSelectedClicked.push(_checkbox.val());
        }
    }
    console.log('end checked:',_checkbox.attr('checked'));
    //evt.stopPropagation();
});
    
    })(jQuery);