title: Loading certain amount of elements to each container
body: <p>How can I set the loop to have 10 <code>.alert</code> class inside each <code>.content</code> class?</p>
  
  <pre><code>    var itemsNumber = Math.floor(Math.random() * 100) + 1;
  for (i = 0; i &lt; itemsNumber; i++) { 
      $('.contents').append(' &lt;div class="content"&gt;&lt;div class="alert alert-success" role="alert"&gt; Alert '+i+'&lt;/div&gt;&lt;/div&gt;')
  }
  </code></pre>
  
  <p>Apparently I am loading one <code>alert</code> to each <code>content</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>var itemsNumber = Math.floor(Math.random() * 100) + 1;
  for (i = 0; i &lt; itemsNumber; i++) {
    $('.contents').append(' &lt;div class="content"&gt;&lt;div class="alert alert-success" role="alert"&gt; Alert ' + i + '&lt;/div&gt;&lt;/div&gt;')
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.content {
    background: khaki;
    margin: 10px;
    border: 1px solid #999;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="contents text-center"&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>