title: Loading options from select work only for first item with class
body: <p>I've just started with JavaScript/jQuery and I don't understand why my code populates the select tag only if I add steps before the click or only for the first STEP/PP's table.</p>
  
  <p>I've searched and it's a common problem if you use the <code>id</code> instead of the <code>class</code> attribute, but here I've used <code>class</code>. If you have any suggestion, it would be great.</p>
  
  <p>Here's my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.add').click(function() {
    $('.template:last').after('&lt;div class = "template"&gt;&lt;table id="layout-table" WIDTH=${Globals.PRINTEDPAGE_WIDTH} BORDER=1 BORDERCOLOR="#000000" CELLPADDING=1 CELLSPACING=0 style="margin-bottom:10px;"&gt;&lt;th&gt;STEP&lt;/th&gt;&lt;th&gt;PP&lt;/th&gt; &lt;tr&gt; &lt;!-- Uso questa tabella per step e cicli/processi--&gt;&lt;td&gt;&lt;select class="steps3"&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;select class="pp"&gt;&lt;/select&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt;');
  });
  $(document).ready(function() {
    $(".remove").click(function() {
      $(".template:last").remove();
    });
  });
  $('.steps3').on("click", function() {
    for (i = 1; i &lt;= 32; i += 1) {
      $('.steps3').append($('&lt;option&gt;', {
        value: i,
        text: i
      }));
  
    }
  });
  $('.pp').on("click", function() {
    for (i = 1; i &lt;= 12; i += 1) {
      $('.pp').append($('&lt;option&gt;', {
        value: i,
        text: i
      }));
  
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="template"&gt;
    &lt;table id="layout-table" width=50% border=1 cellpadding=1 CELLSPACING=0 style="margin-bottom:10px;"&gt;
      &lt;th&gt;STEP&lt;/th&gt;
      &lt;th&gt;PP&lt;/th&gt;
      &lt;tr&gt;
        &lt;!-- Uso questa tabella per step e cicli/processi--&gt;
        &lt;td&gt;
          &lt;select class="steps3"&gt;
          &lt;/select&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;select class="pp"&gt;
          &lt;/select&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  &lt;!-- template --&gt;
  &lt;p&gt;&lt;button type="button" name="Submit" class="add"&gt;Add new step&lt;/button&gt;&lt;/p&gt;
  &lt;p&gt;&lt;button type="button" class="remove" name="Submit"&gt;Remove step&lt;/button&gt;&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here the code on JSFiddle: <a href="http://jsfiddle.net/hoptys0a/" rel="nofollow noreferrer">http://jsfiddle.net/hoptys0a/</a></p>
  
  <p>Thanks, SCA</p>