Highlight the Selected Menu Item with one href ="/"

Highlight the Selected Menu Item with one href ="/"

I am seeking help in resolve the following problem. 

I have created a menu and use JQuery to highlight the selected menu item (WordPress site). But one of the href used has to be "/" for home page. When selecting any other menu item the item for the home page is always highlighted.

The following are the codes:

.active {
    color: red;

<div id="custom-menu" class="custom-menu col-full" style="border:0px solid red;">
                <li><a id="main" class="btn" href="/">Home Page</a></li>
                <li><a class="btn" href="/perform/">Perform</a></li>
                <li><a class="btn" href="/museum/">Museum</a></li>
                <li><a class="btn" href="/hangout/">Hangout</a></li>
                <li><a class="btn" href="/markets/">Markets</a></li>
                <li><a class="btn" href="/my-events/">My Events</a></li>
                <li><a class="btn" href="/events/list/">Search</a></li>

jQuery Code
//User jQuery instead of "$" in WordPress to avoid code conflict 


  jQuery(".custom-menu a").each(function() {
     if ((window.location.pathname.indexOf(jQuery(this).attr('href'))) > -1) {

I would be grateful if anyone could help me resolve this quickly!