title: How to use Pug/Jade iterations to create multiple elements with different content?
body: <p>I'm presently learning iterations in Pug/Jade. I'd like to use this tool going forward.</p>
  
  <p>In the code below, you basically have what's supposed to amount to a slider. </p>
  
  <p>In the first instance, the <code>#{i}</code> is supposed to return values 1-4 to each listed class, but instead compiles just the same. Though I've seen this technique work for others.</p>
  
  <p>Secondly, with regard to my <code>data</code> array, I've been able to get the <code>title</code> value to show in each <code>section</code>, however, getting the <code>button</code> value to appear within the same container seems to be the challenge.</p>
  
  <pre><code>- var data=[{'title':'Home Run', 'button':'It\'s a win'}, {'title':'Testing', 'button':'Tested'}, {'title':'Foreground', 'button':'Background'}, {'title':'Forest', 'button':'Trees'}]
  
  
  .slide-container
    - var i=0;
      while (i++ &lt; 4)
        mixin list(title)
          section(class='slide-#{i}')
              h2= title
  
  
    each item in data
      +list(item.title)
      a(href='#')= item.button
  </code></pre>
  
  <p>The code above returns the following:</p>
  
  <pre><code>&lt;div class="slide-container"&gt;
      &lt;section class="slide-#{i}"&gt;
        &lt;h2&gt;Home Run&lt;/h2&gt;
      &lt;/section&gt;&lt;a href="#"&gt;It's a win&lt;/a&gt;
      &lt;section class="slide-#{i}"&gt;
        &lt;h2&gt;Testing&lt;/h2&gt;
      &lt;/section&gt;&lt;a href="#"&gt;Tested&lt;/a&gt;
      &lt;section class="slide-#{i}"&gt;
        &lt;h2&gt;Foreground&lt;/h2&gt;
      &lt;/section&gt;&lt;a href="#"&gt;Background&lt;/a&gt;
      &lt;section class="slide-#{i}"&gt;
        &lt;h2&gt;Forest&lt;/h2&gt;
      &lt;/section&gt;&lt;a href="#"&gt;Trees&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Which is great, but not what I need. What I would really like to see compiled is the following:</p>
  
  <pre><code>&lt;div class="slide-container"&gt;
      &lt;section class="slide-1"&gt;
        &lt;h2&gt;Home Run&lt;/h2&gt;
        &lt;a href="#"&gt;It's a win&lt;/a&gt;
      &lt;/section&gt;
      &lt;section class="slide-2"&gt;
        &lt;h2&gt;Testing&lt;/h2&gt;
        &lt;a href="#"&gt;Tested&lt;/a&gt;
      &lt;/section&gt;
      &lt;section class="slide-3"&gt;
        &lt;h2&gt;Foreground&lt;/h2&gt;
        &lt;a href="#"&gt;Background&lt;/a&gt;
      &lt;/section&gt;
      &lt;section class="slide-4"&gt;
        &lt;h2&gt;Forest&lt;/h2&gt;
        &lt;a href="#"&gt;Trees&lt;/a&gt;
      &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The pen can be viewed here: <a href="https://codepen.io/jobaelish/pen/jYyGQM?editors=1000" rel="nofollow noreferrer">https://codepen.io/jobaelish/pen/jYyGQM?editors=1000</a></p>
  
  <p>What must I do with my code to get the desired result?</p>
  
  <hr>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>Ok. So, a new bit of code. I was able to solve some of the issues I initially had, resolving the class iteration by using <code>+ i</code> instead of <code>#{i}</code>.</p>
  
  <p>Secondly, by adding a <code>block</code> tag to my Pug mixin, I was able to include the links, no prob.</p>
  
  <p>Here's the new code:</p>
  
  <pre><code>- var data=[{'title':'Home Run', 'button':'It\'s a win'}, {'title':'Testing', 'button':'Tested'}, {'title':'Foreground', 'button':'Background'}, {'title':'Forest', 'button':'Trees'}]
  
  
  mixin list(title)
    h2= title
    block
  
  .slide-container
    each item in data
      //- - var i = 0;
      //-   while i &lt; 4
      section(class='slide-' + i++)
        +list(item.title)
          a(href='#')= item.button
  </code></pre>
  
  <p>Which renders:</p>
  
  <pre><code>&lt;div class="slide-container"&gt;
    &lt;section class="slide-NaN"&gt;
      &lt;h2&gt;Home Run&lt;/h2&gt;&lt;a href="#"&gt;It's a win&lt;/a&gt;
    &lt;/section&gt;
    &lt;section class="slide-NaN"&gt;
      &lt;h2&gt;Testing&lt;/h2&gt;&lt;a href="#"&gt;Tested&lt;/a&gt;
    &lt;/section&gt;
    &lt;section class="slide-NaN"&gt;
      &lt;h2&gt;Foreground&lt;/h2&gt;&lt;a href="#"&gt;Background&lt;/a&gt;
    &lt;/section&gt;
    &lt;section class="slide-NaN"&gt;
      &lt;h2&gt;Forest&lt;/h2&gt;&lt;a href="#"&gt;Trees&lt;/a&gt;
    &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So, the only thing left is to get the classes to iterate properly when compiled. I've gotten some result of either <code>style-0</code>, <code>style-5</code>, and now <code>style-NaN</code>.</p>
  
  <p>How can I now get this to work as <code>style-1</code>, <code>style-2</code>, etc?</p>