Show Tab from inner <a href> link

I use nav-tabs but I have a problem switching between tabs from link which are located inside the contents of tab 1.
I want to switch from tab 1 to tab 3 clickin in this link instead of clicking the tab’s title.

I’ve tried this solution (Under the hood, How to open a tab from external link?) but I get this error: "Uncaught TypeError: $ is not a function".

I’m using jquery 3.5.1 and bootstrap 4.4.1

    <ul class="nav nav-tabs" id="myTab" role="tablist">
     <li class="nav-item"><a class="nav-link active" id="pricing-tab" href="#pricing" data-toggle="tab" role="tab" aria-controls="pricing" aria-selected="true">Pricing</a></li>
     <li class="nav-item"><a class="nav-link" id="details-tab" href="#details" data-toggle="tab" role="tab" aria-controls="details" aria-selected="true">Details</a></li>
     <li class="nav-item"><a class="nav-link" id="booking-tab" href="#booking" data-toggle="tab" role="tab" aria-controls="booking" aria-selected="true">Booking</a></li>
    </ul>

    <div class="tab-content" id="myTabContent">
      <div class="tab-pane tab-bg fade show active" id="pricing" role="tabpanel" aria-labelledby="pricing-tab">
pricing tab content and <a href="#booking" Xdata-toggle="tab" class="tab-link">link to tab3</a>
      </div>
      <div class="tab-pane tab-bg fade" id="details" role="tabpanel" aria-labelledby="details-tab">details tab content</div>
      <div class="tab-pane fade" id="booking" role="tabpanel" aria-labelledby="booking-tab">booking tab content</div>
    </div>

>Solution :

If you are using JQuery with a tool that might include other JS libraries or frameworks, it is possible that conflicts occur due to several libraries using $.

Solution is to include JQuery like this:

jQuery(document).ready(function ($) {
  // your JQuery code
});