Bootstrap dropdown buttons dont lose active state - html

Question

I'm trying to make a card of ship information for a game, but for each ship there are multiple veriations. e.g "Large Clipper" and a "Festive Large Clipper".
But on the dropdown menu my list items work once, and then don't return to an inactive state.
JSFiddle
<div class="p-0">
<div class="container">
<div class="row">
<div class="col-md-12" style="">
<div class="tab-content">
<div class="tab-pane fade show active" id="adventure" role="tabpanel">
<div class="card" style="">
<div class="card-header"><img src="http://eversong.ivyro.net/SHIP/00000024.png" height="50" width="50">
<h4 style="display:inline-block">Large Clipper</h4>
<div class="btn-group float-right">
<button class="btn btn-primary dropdown-toggle" id="variationsDropdown" type="button" aria-haspopup="true" aria-expanded="true" data-toggle="dropdown"> Variations </button>
<div class="dropdown-menu" aria-labelledby="variationsDropdown">
<a class="dropdown-item" href="#large-clipper" data-toggle="tab">Large Clipper</a>
<a class="dropdown-item" href="#festive-large-clipper" data-toggle="tab">Festive Large Clipper</a>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane fade show active" id="large-clipper">
<div class="card-body">
<h6 class="text-muted">
Just a big and fast clipper.
</h6>
<p class=" p-y-1">
<span style="font-style:italic">Level requirements: </span>
<span>Adventure: 30 </span>
<span>Trade: 56 </span>
<span>Maritime: 75</span>
</p>
<div class="row">
<div class="col-md-6"><a class="btn btn-primary btn-lg btn-block my-1" href="">Selling: <span>5</span> </a></div>
<div class="col-md-6"><a class="btn btn-primary btn-lg btn-block my-1" href="">Buying: <span>10</span> </a></div>
</div>
</div>
</div>
<div class="tab-pane fade" id="festive-large-clipper">
<div class="card-body">
<h6 class="text-muted">
A large clipper but with fancy plating.
</h6>
<p class=" p-y-1">
<span style="font-style:italic">Level requirements: </span>
<span>Adventure: 30 </span>
<span>Trade: 56 </span>
<span>Maritime: 75</span>
</p>
<div class="row">
<div class="col-md-6"><a class="btn btn-primary btn-lg btn-block my-1" href="">Selling: <span>5</span> </a></div>
<div class="col-md-6"><a class="btn btn-primary btn-lg btn-block my-1" href="">Buying: <span>10</span> </a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You can see what I mean when you press on the items from the "Variations" dropdown.

Answer 1

Apparently it's a bug, found my solution here (github).
had to add
$(".nav-pills .nav-item .nav-link:not(.nav-pills .nav-item.dropdown .nav-link), .dropdown-item").click(function()
{
$(".dropdown-item.active").removeClass('active');
});