title: Insert banner div after 5 elements using Javascript
body: <p>I have smarty template with this code:</p>
  
  <p>with this code:</p>
  
  <p><a href="http://jsfiddle.net/kcdvrt8g/" rel="nofollow">http://jsfiddle.net/kcdvrt8g/</a></p>
  
  <p>And this is the output results:</p>
  
  <pre><code>&lt;section id="listings" class="list clearfix"&gt;
  &lt;article class="item"&gt;
  &lt;article class="item"&gt;
  &lt;article class="item"&gt;
  &lt;article class="item"&gt;
  &lt;article class="item"&gt;
  &lt;article class="item"&gt;
  &lt;article class="item"&gt;
  &lt;article class="item"&gt;
  &lt;article class="item"&gt;
  &lt;article class="item"&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>I want to add new div after each 5 article element  to be like this:</p>
  
  <pre><code>&lt;section id="listings" class="list clearfix"&gt;
  &lt;article class="item"&gt;
  &lt;article class="item"&gt;
  &lt;article class="item"&gt;
  &lt;article class="item"&gt;
  &lt;article class="item"&gt;
  
  &lt;div&gt;test my content&lt;/div&gt;
  
  &lt;article class="item"&gt;
  &lt;article class="item"&gt;
  &lt;article class="item"&gt;
  &lt;article class="item"&gt;
  &lt;article class="item"&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>Thank you,
  Tariq</p>