JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<ol id="browse-files" >
<li class="textOverflow unRead browse-file row">                          <span class="messageName"> This is my demo file                           </span>                                      
</li>

<li  class="textOverflow unRead browse-file row">                         <span class="messageName"> This is my second file                         </span>                                                                   </li>
<hr class="messageContentSeparator">
</ol>
<ol id="browse-files" >
<li class="textOverflow unRead browse-file row">                          <span class="messageName"> This is my demo1 file                           </span>                                      
</li>

<li class="textOverflow unRead browse-file row">                         <span class="messageName"> This is my third file                         </span>                                                                   </li>
<hr class="messageContentSeparator">
</ol>
</div>

CSS

ol#browse-files {
    margin: 0;
    padding: 0;
    list-style: none;
}
ol#browse-files li {
    line-height: 40px;
    border-bottom: solid 1px #dcdcdc;
}
ol#browse-files li:hover {
    background-color: #dff0d8;
}
ol#browse-files li.active {
    background-color: #468847;
    color: #fff;
}
.container{
    padding:20px 0;
    background:#ccc;    
}

JavaScript

var Elemnt;
$(document).ready(function () {

    $('ol#browse-files li').click(function (e) {
        e.stopPropagation();
        if (e.ctrlKey || e.shiftKey) { //Select multiple files with ctrl
            $(this).toggleClass('active');
        } else if ($(this).hasClass('active')) {
            $(this).toggleClass('active');
        } else {
            $('ol#browse-files li').removeClass('active');
            $(this).addClass('active');
        }
    });

    $(".container").not("ol li").click(function (e) { // It works well without this but i want to deselect when user click anywhere else.
        $('ol#browse-files li').removeClass('active');
    });
    
    $(document).keydown(function (e) {
        var code = e.keyCode ? e.keyCode : e.which;
        if(code==38 && e.shiftKey){
        Elemnt=$('ol#browse-files li.active:first');
        getprevelement(Elemnt);
      	 
            
        }else if(code==40 && e.shiftKey){
          var nxtelement= $('ol#browse-files li.active:first').next().prop('tagName');
       
            $('ol#browse-files li.active:last').next("li.row").toggleClass("active");
        }
    });
});

function getprevelement(thisElement){

	 prevelement=thisElement.prev();
   if(prevelement.prop('tagName')=='LI')
      {
      prevelement.toggleClass("active");
     
      }
   else{   
    		prevelement.toggleClass("active");
      	prevelement=getprevelement(prevelement); 
      
      }
   
  
}