jQuery Append only adding 1 item
<p>I'm trying to make jQuery append a div to the body of my document multiple times, but for some reason its only appending one item and I'm guessing its the last item in the loop.</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>$(function(){
  var howManyParticles = 11;
  var bodyWidth = $(document).width();
  var randomSpawn = Math.floor(Math.random() * bodyWidth) + 1;
  var particleStyle = "background: lightgray;width: 10px;height: 10px;min-height: 10px;min-width: 10px;position: fixed;bottom: 0;left:" + randomSpawn + ";";
  var particle = $("&lt;div class='particle' style='"+ particleStyle +"'&gt;&amp;nbsp;&lt;/div&gt;");

  function spawnParticles(){
    for(var i = 0; i &lt;= howManyParticles; i++)
    {
      $('body').append(particle);
      console.log('spawned');
    }
  }

  spawnParticles();
});</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;</code></pre>
</div>
</div>
</p>

<p>This only spawns 1 item to the window, how do i make it so it spawns as many items as <code>i &lt;= howManyParticles</code> is going to be?</p>

<p>EDIT: My Final Code</p>

<p>I forgot that i need to put the <code>math.random</code> function within the loop to give a different horizontal value to each different particle that was spawned!</p>

<pre><code>$(function(){
    var howManyParticles = 11;
    var bodyWidth = $(document).width();

    function spawnParticles(){
        for(var i = 0; i &lt;= howManyParticles; i++)
        {
            var randomSpawn = Math.floor(Math.random() * bodyWidth) + 1;
            var particleStyle = "background: lightgray;width: 10px;height: 10px;min-height: 10px;min-width: 10px;position: fixed;bottom: 0;left:" + randomSpawn + ";";
            var particle = $("&lt;div class='particle' style='"+ particleStyle +"'&gt;&amp;nbsp;&lt;/div&gt;");
            $('body').append(particle);

        }
    }

    spawnParticles();
});
</code></pre>