title: Increment z-index for each div
body: <p>I am working on a design where divs overlay each other and I do to separately increment <code>z-index</code> by 1 for each member of a class. And I feel like there is a better way to do it with <code>jquery</code>.</p>
  
  <p>What I want is something like for each div with the class <code>section</code> to have a <code>z-index</code> greater by than the previous but not being thrown off by divs which are not members of the specific class such as</p>
  
  <pre><code>&lt;div class="section" style="z-index:1"&gt;Lorem&lt;/div&gt;
  &lt;div class="section" style="z-index:2"&gt;Lorem&lt;/div&gt;
  &lt;div id="OutOfPlaceDiv"&gt;Foo&lt;/div&gt;
  &lt;div class="section" style="z-index:3"&gt;Lorem&lt;/div&gt;
  </code></pre>