title: Bootstrap Tab Panels with a Jinja2 for loop
body: <p>I'm trying to get bootstrap 4 dev tabs working with a for loop in jinja2.</p>
  
  <p>Here's the test code I'm trying:</p>
  
  <pre><code>&lt;!-- Nav tabs --&gt;
    &lt;ul class="nav nav-tabs" role="tablist"&gt;
      {% for e in range(1,3) %}
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link {% if loop.index == 1 %}active{% endif %}" href="#{{ e }}" role="tab"
             data-toggle="tab"&gt;{{ e }}&lt;/a&gt;
        &lt;/li&gt;
      {% endfor %}
    &lt;/ul&gt;
  
  &lt;!-- Tab panes --&gt;
    &lt;div class="tab-content"&gt;
      {% for e in range(1,3) %}
        &lt;div role="tabpanel" class="tab-pane fade {% if loop.index == 1 %}in active{% endif %}"
             id="{{ e }}"&gt;{{ e }}&lt;/div&gt;
      {% endfor %}
    &lt;/div&gt;
  </code></pre>
  
  <p>The nav tabs function as expected, two tabs are visible, "1" and "2", and the active class is correctly applied.</p>
  
  <p>However the content tabs do not change when clicking between nav tabs. The content tab is static on "1".</p>
  
  <p>Changing the loop.index condition to loop.index == 2 means the tab content is static on "2".</p>
  
  <p>What am I missing here?</p>
  
  <p>Thanks.</p>