Add active class on hover and on click

Add active class on hover and click, but how to remove the previous set classes when the user clicks on another item?

HTML

<div class="select">
    <div class="select-examn-row-item">
        <div class="selectableRow">First Item <i class="arrow"></i></div>
    </div>
    <div class="select-examn-row-item">
        <div class="selectableRow">Second Item <i class="arrow"></i></div>
    </div>
    <div class="select-examn-row-item">
        <div class="selectableRow">Third Item <i class="arrow"></i></div>
    </div>
</div>

CSS

.select {
    /*width: 300px;*/
    /*border: 1px solid #eee;*/
    color: #444444;
    padding: 10px 20px;
}

    .select-examn-row-item {
        text-decoration: none;
        border-bottom: 1px solid #ccc;
        color: #444;
        display: block;
        padding: 10px;
        font-size: 12px;
        position: relative;
        height: 16px;
    }
    .select-examn-row-item:last-child {border: transparent;}
    
    .select-examn-row-item .selectableRow:after {
        content:"";
        width:0;
        height:0;
        border-top:18px solid transparent;
        border-bottom:18px solid transparent;
        border-left:18px solid #fff;
        position: absolute;
        right: -18px;
        top: 0;
    }
    
    .select-examn-row-item.hovered {
        background-color: #fa6a00;
        color: #fff;
        cursor: pointer;
    }
    
    .select-examn-row-item.hovered .selectableRow:after {
        border-left:18px solid #fa6a00;
    }
    
    .select-examn-row-item .selectableRow i.arrow {
        width: 6px;
        height: 10px;
        display: inline-block;
        float: right;
        background: url('http://s7.postimg.org/ze62pveef/arrow.png') right top no-repeat;
        background-size: 6px 20px;
    }
        .select-examn-row-item.hovered .selectableRow i.arrow {
            color: #fff;
            background-position: right bottom;
        }

JavaScript

$(".select-examn-row-item").hover(
    function() {
        $(this).addClass('hovered');
    }, function() {
        if(!$(this).hasClass('clicked') ){
            $(this).removeClass('hovered');
        }
    }
);

$(".select-examn-row-item").click(function(e){
    e.preventDefault(); 
    e.stopPropagation;
    $(this).find('clicked').removeClass('clicked');
    $(this).addClass('clicked');
});