title: Append Only Once Inside an .Each Loop
body: <p>I'm building a feature where it tells a reader that they've already read a specific post. To do this, I need to to notify the user, and I'm doing so by appending an element to an .article. The problem I'm having, is that because I'm appending inside an .each loop, the element is appending 4 times. </p>
  
  <p>Heres my code:</p>
  
  <pre><code>$('.article-container').each(function() {
  
      // CHECK IF THE DATA IS IN THE ARRAY    
      if(cookieValue.indexOf($(this).data('id')) != -1) {                     
  
          $(this).addClass('readit');                                         
          $('&lt;h4 class="readit-alert"&gt;You&amp;apos;ve read it!&lt;/h4&gt;').appendTo('.article-container.readit');
  
      } else {
  
          // OTHERWISE, ADD CLASS NOT READ                
          $(this).addClass('notread');                                        
  
      }
  
  });
  </code></pre>
  
  <p>And here is what it's returning:</p>
  
  <pre><code>&lt;h4 class="readit-alert"&gt;You&amp;apos;ve read it!&lt;/h4&gt;
  &lt;h4 class="readit-alert"&gt;You&amp;apos;ve read it!&lt;/h4&gt;
  &lt;h4 class="readit-alert"&gt;You&amp;apos;ve read it!&lt;/h4&gt;
  &lt;h4 class="readit-alert"&gt;You&amp;apos;ve read it!&lt;/h4&gt;
  </code></pre>
  
  <p>How can write this to only append the "readit-alert" only once within the article-container?</p>