title: Add div after every third post
body: <p>I found this post which does what I want:
  <a href="https://stackoverflow.com/questions/14372545/append-span-tag-after-every-3rd-div-jquery">Append Span Tag, after every 3rd div Jquery</a>
  <a href="http://jsfiddle.net/pxaS4/2/" rel="nofollow noreferrer">http://jsfiddle.net/pxaS4/2/</a></p>
  
  <p>But I am using a three column layout. I'd like to clear:both after every third post so that if they differ in height, they will always stay 3 to a row.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="post-listing"&gt;
  
      &lt;div class="post-item"&gt;
      This text make the post-item different height.
      &lt;/div&gt;
  
      &lt;div class="post-item"&gt;
      This text make the post-item different height. This text make the post-item different height.
      &lt;/div&gt;
  
      &lt;div class="post-item"&gt;
      This text make the post-item different height. 
      &lt;/div&gt;
  
      &lt;div class="post-item"&gt;
      This text make the post-item different height. This text make the post-item different height. This text make the post-item different height.
      &lt;/div&gt;
  
      &lt;div class="post-item"&gt;
      This text make the post-item different height.
      &lt;/div&gt;
  
      &lt;div class="post-item"&gt;
      This text make the post-item different height. This text make the post-item different height.
      &lt;/div&gt;
  
      &lt;div class="post-item"&gt;
      This text make the post-item different height. This text make the post-item different height. This text make the post-item different height.
      &lt;/div&gt;
  
      &lt;div class="post-item"&gt;
      This text make the post-item different height.
      &lt;/div&gt;
  
      &lt;div class="post-item"&gt;
      This text make the post-item different height.
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.clear {
    clear: both;
    color: #000;
  }
  
  .post-listing {
    width: 300px;
  }
  
  .post-listing .post-item {
    float: left;
    color: red;
    background: #ccc;
    width: 32%;
    margin-right: 2%;
    margin-bottom: 30px;
  }
  
  .post-listing :nth-child(3n+0).post-item {
    margin-right: 0%;
    clear: right;
  }
  </code></pre>
  
  <p>This seems to be working fine. The issue is when I try to add a div class"clear" with jquery after every third post. This is what I have and it's not working:</p>
  
  <pre><code>$('div.post-listing &gt; div.post-item:nth-child(3n)').after('&lt;div class="clear"&gt;this is the clear class&lt;/div&gt;');
  </code></pre>
  
  <p>jsfiddle (non-working) here:<a href="https://jsfiddle.net/936qtbu5/" rel="nofollow noreferrer">jsfiddle</a> </p>
  
  <p>Any help is greatly appreciated.
  Thanks</p>