title: jQuery .each then .append bug
body: <p>// Jade</p>
  
  <pre><code>.occ
        h1.occ__reveal Section
        .occ__hidden
          p Content
  .occ
        h1.occ__reveal Section
        .occ__hidden
          p Content
  .occ
        h1.occ__reveal Section
        .occ__hidden
          p Content
  </code></pre>
  
  <p>// JS</p>
  
  <pre><code>$('.occ .occ__hidden').each(function() {
    var button = $('&lt;button&gt;').text('Button');
    $(this).append(button);
  })
  </code></pre>
  
  <p>I'm trying to do something similar to <a href="https://stackoverflow.com/questions/13485925/jquery-help-using-each-and-append-to-add-pictures-to-html?answertab=votes#tab-top">this SO</a>, but the output results in multiple 'button' appended on each instance of my .each(). So right now each .occ__hidden element is getting 3 buttons appended. Am I missing something here?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>It turns out that it was  an issue with the way I was calling my anuglar directive. I was calling the directive as a class and ignorantly named it 'occ'. Since there's 3 instances of the occ class in this example the directive was being executed 3 times, hence the reason why the button element was being appending multiple times. In hindsight I should have shared my code in it's entirety, including the angular portion, but at the time I deemed it unnecessary for simplicity's sake. Sorry for the trouble but I do appreciate the help some of you have offered. Hope this servers as 'gotcha' insight for anyone who encounters this in the future.</p>