Bootstrap tabs not working in Django templates if generated dynamically using dictionary data

Question

I am using Bootstrap4 to generate tabs in django template. The id attributes of the nav-link and the tab-pane are generated using a dictionary. Here is the code

<div class="col-md-3">
  <ul class="nav flex-column nav-tabs" id="v-tabs" role="tablist" aria-orientation="vertical">
  {% for MD, MDvals in MDdata.items %}
    {% with forloop.counter as MDCnt %}
      <li class="nav-item">
        <a class="nav-link {% if MDCnt == 1 %}active{% endif %}"
          id="{{MDCnt}}-tab" data-toggle="tab" href="#{{MDCnt}}"  
          role="tab" aria-controls="{{MDCnt}}" 
          aria-selected="{% if MDCnt == 1 %}true{% else %}false{% endif %}">{{MD}}
        </a>
      </li>
    {% endwith %}
  {% endfor %}
      <li class="nav-item">
        <a class="nav-link" id="tab1-tab" data-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="true">Tab 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="tab2-tab" data-toggle="tab" href="#tab2" role="tab" aria-controls="tab2" aria-selected="false">Tab 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="tab3-tab" data-toggle="tab" href="#tab3" role="tab" aria-controls="tab3" aria-selected="false">Tab 3</a>
      </li>
  </ul>
</div>
<div class="col-md-9">
  <div class="tab-content" id="v-tabs-content">
  {% for MD, MDvals in MDdata.items %}
    {% with forloop.counter as MDCnt %}
      <div class="tab-pane fade {% if MDCnt == 1 %} show active{% endif %}" 
        id="{{MDCnt}}" role="tabpanel" aria-labelledby="{{MDCnt}}-tab">
        <h3>Content for tab XXX {{MD}} XXX</h3>
      </div>
    {% endwith %}
  {% endfor %}

    <div class="tab-pane fade" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
      <h3>Content for Tab 1</h3>
    </div>
    <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="tab2-tab">
      <h3>Content for Tab 2</h3>
    </div>
    <div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="tab3-tab">
      <h3>Content for Tab 3</h3>
    </div>
</div>

The tab1, tab2 and tab3 portion of the code came from Bootstrap manual and works correctly. When I click on tab1 link it shows correct tab content. However, whenever I click on any of the links created using the MDData dictionary it doesn't work. The class of the nav-link changes to "active" and aria-selected becomes "true". However, the tab-content doesn't change to "show active". The same page uses Bootstrap-4 extensively before and after this tab portion and is working correctly. Edit: I also found that I have to use following javascript code to enable the tabs.

<script>
    $(document).ready(function() {
        $('#v-tabs a').on('click', function (e) {
            e.preventDefault();
            $(this).tab('show');
        });
    });
</script>

This code also doesn't work.