Bootstrap dropdown buttons dont lose active state

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');
});