title: jQuery/Javascript adding number id to two elements with a for-loop
body: <p>I'm using Bootstrap to create tabs when a link in a treeview is clicked. Within each tab that opens on a click there are two other tabs called Query Builder and Dimension Builder. Below is the markup that's created on the go with jQuery (just part of it):</p>
  
  <pre><code>&lt;div class="tab-pane active" id="1" role"tabpanel"&gt;
      &lt;ul class="nav nav-tabs query-dimension-tabs" role="tablist"&gt;
          &lt;li role="presentation" class="active"&gt;
              &lt;a role="tab" data-toggle="tab" href="#tab0" aria-controls="tab0"&gt;Query Builder&lt;/a&gt;
          &lt;/li&gt;
          &lt;li role="presentation"&gt;
              &lt;a role="tab" data-toggle="tab" href="#tab1" aria-controls="tab1"&gt;Dimension Builder&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class="tab-content"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="tab-pane" id="2" role"tabpanel"&gt;
      &lt;ul class="nav nav-tabs query-dimension-tabs" role="tablist"&gt;
          &lt;li role="presentation" class="active"&gt;
              &lt;a role="tab" data-toggle="tab" href="#tab1" aria-controls="tab1"&gt;Query Builder&lt;/a&gt;
          &lt;/li&gt;
          &lt;li role="presentation"&gt;
              &lt;a role="tab" data-toggle="tab" href="#tab2" aria-controls="tab2"&gt;Dimension Builder&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class="tab-content"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>To be able to have my forms, one for Query Builder and one for Dimension Builder, within these tabs and keep each form unique from the other in each tab within each tab-pane all of those <code>&lt;a&gt;</code> tags need to have unique href and aria-controls attributes, that is the number on the end has to be unique. So the first <code>&lt;a&gt;</code> tag needs to be number 0, next number 1, 2, 3, 4.... and so on.</p>
  
  <p>I'm using a for-loop to loop through all <code>&lt;ul&gt;</code> that exist and I'm trying to set the number for two <code>&lt;a&gt;</code> tags in each <code>&lt;ul&gt;</code>. Below is the for-loop:</p>
  
  <pre><code>    var contentUl = firstContentDiv.find(".query-dimension-tabs");      
  
      for (var i = 0; i &lt; contentUl.length; i++) {      
          var qId = i;
          var dId = i + 1;        
  
          qA.href = "#tab" + qId;
          qA.setAttribute("aria-controls", "tab" + qId);
          dA.href = "#tab" + dId;
          dA.setAttribute("aria-controls", "tab" + dId);
      }
  </code></pre>
  
  <p>I've tried many different calculations but I always end up with 0 1 1 2 2 3, but I would like to have it 0 1 2 3 4 5....to how ever many tabs that have these two tabs are.</p>
  
  <p>Is this possible with some calculations?</p>
  
  <p>Here is a photo of the tabs when two links have been clicked:</p>
  
  <p><a href="https://i.stack.imgur.com/gLxNl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gLxNl.png" alt="enter image description here"></a></p>