Active Menu not working after trailing Slash added in .htaccss

I’m creating a dynamic PHP blog site, where i have active current menu by using jQuery, everything was works fine before .htacess modification for trailing slash…

link activated

Tech is tab and contain is activated but not working Active Menu LInk

If you visit below url Menu Active Link works fine

 http://example.com/tech

If you visit below url than Menu Active Link will not work

http://example.com/tech/

For Trailing Slash I have use below code

.htacess

#force trainling slash
RewriteCond %{REQUEST_URI} /+[^\.]+$
RewriteRule ^(.+[^/])$ %{REQUEST_URI}/ [R=301,L]
#end of force trailing slash

RewriteRule ^([0-9a-zA-Z]+)/?$ archive.php?category=$1 [QSA,L]

Menu

<ul id="nav-main">
  <li><a href="http://example.com/"> Home</a></li>
  <li><a href="/tech">  Technology</a></li> 
  <li><a href="/business">Business</a></li>
  <li><a href="/sports"> Sports</a></li> 
  <li><a href="/science">Science</a></li>
</ul>

jQuery

jQuery(document).ready(function($){
        var path = window.location.href;
        $('#nav-main li a').each(function() {
            if (this.href === path) {
                $(this).addClass('active'); 
            }
        });
    });

Css

ul#nav-main li a:hover {
  border-bottom: 4px solid #4db2ec;
  color: black;
  font-weight: bold;
}
ul#nav-main li a.active {
  border-bottom: 4px solid #4db2ec;
  color: black;
  font-weight: bold;
}

N.B. : The contain of the website works fine.... only ACTIVE Link not working (main problem).

I’don’t even know how to make it happens I was trying this on my side thousand times but didn’t succeed even I tried lot of internet search, Help me to