How to add active class with current element and remove from all other elements

Question

I have 5 options in the navbar. Bydefault first option (dashboard) will be in active state. when the second option is selected i.e.,(motes) both first and second options are getting selected. i want only one option to be selected when i click on the particular option. how to overcome this?

    <nav class="nav-container showNav">
        <ul class="nav-list">
            <li class="list-item dashboard">
            <a href="#"><i class="active menu fa fa-tachometer" aria-hidden="true"> dashboard </i></a>
            </li>
            <li class="list-item motes none-events">
            <a href="#"><i class="menu fa fa-desktop"> motes </i></a>
            </li>
            <li class="list-item network none-events">
            <a href="#"><i class="menu fa fa-usb"> network </i></a>
            </li>
            <li class="list-item sensors none-events">
            <a href="#"><i class="menu fa fa-edge"> sensors </i></a>
            </li>
            <li class="list-item log none-events">
            <a href="#"><i class="menu fa fa-bar-chart"> log </i></a>
            </li>
        </ul>
    </nav>

here is my jquery

$(document).ready(function() {
    $(".menu").click(function () {
        if (!$(this).hasClass("active")) {
            $(this).addClass("active")
                    .siblings(".menu")
                    .removeClass("active");
        }
    });
    $(".motes").click(function() {
        $(this).siblings(".menu").removeClass("active");
    });
});

Answer 1

Try this,

$(document).ready(function() {
$(".menu").click(function () {
    $(this).addClass("active");
    $(".menu").not(this).removeClass("active");
});

});

Answer 2

Try this code

$(document).ready(function() {
    $(document).on('click', '.menu',function () {
        $('.menu').removeClass("active");
        $(this).addClass("active");
    });
});