Navbar Section Highlighting - html

Question

Recently I tried adding functionality to a website I am making by making the current section the user is on appear as "highlighted" in the navbar. In order to do this, I added this JQuery script to my code:
<script type="text/javascript">
$(document).on('click', '.navbar-end a', function() {
$(this).addClass('active').siblings().removeClass('active');
});
</script>
This function determines which section of the navbar was clicked and adds the class "active" to the specific anchor tag. The class "active" is styled with a different color so that it appears different from the other navbar elements.
My Navbar:
<div class="hero-head">
<nav class="navbar">
<div class="container">
<div id="navbar" class="navbar-menu">
<div class="navbar-end">
<a href="{{ url_for('welcome') }}" class="active">
Home
</a>
{% if not current_user.is_authenticated %}
<a href="{{ url_for('login') }}" class="navbar-item">
Login
</a>
<a href="{{ url_for('signup') }}" class="navbar-item">
Sign Up
</a>
{% endif %}
{% if current_user.is_authenticated %}
<a href="{{ url_for('index') }}" class="navbar-item">
My Tasks
</a>
<a href="{{ url_for('logout') }}" class="navbar-item">
Logout
</a>
{% endif %}
</div>
</div>
</div>
</nav>
CSS:
a {
color: #b2b1b1;
font-family: Lato;
display: inline-flex;
margin: 20px;
padding: 3px;
padding-left: 20px;
text-decoration: none;
}
.active {
color: #19dafa !important;
}
Now I will describe the issue I am facing. After making these changes, when I click on a tab on the Navbar on my site, it only momentarily changes to the color specified by the active class. For a split second the color is #19dafa, but then it changes back to #b2b1b1 immediately after (without me clicking on a different Navbar section). This led me to believe that the color was immediately getting overwritten by another style. After trying to debug around this claim, I was unable to find any fixes. Any ideas as to what could be causing this?