JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<ol id="browse-files">
    <li class="browse-file row">
        <div class="span6 file-name-col">timesNew.zip</div>
        <div class="span2 file-type-col">ZIP file</div>
        <div class="span2 file-size-col">1.08MB</div>
        <div class="span2 file-uploaded-col">23//6/2013</div>
    </li>
    <li class="browse-file row">
        <div class="span6 file-name-col">Photos.zip</div>
        <div class="span2 file-type-col">ZIP file</div>
        <div class="span2 file-size-col">30.19MB</div>
        <div class="span2 file-uploaded-col">23//6/2013</div>
    </li>
    <li class="browse-file row">
        <div class="span6 file-name-col">Docs.zip</div>
        <div class="span2 file-type-col">ZIP file</div>
        <div class="span2 file-size-col">12.38MB</div>
        <div class="span2 file-uploaded-col">23//6/2013</div>
    </li>
</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

$(document).ready(function () {
    $('ol#browse-files li').click(function (e) {
        e.stopPropagation();
        if (e.ctrlKey) { //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');
    });
});