jQuery Append only adding 1 item

Question

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.

$(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 = $("<div class='particle' style='"+ particleStyle +"'>&nbsp;</div>");

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

  spawnParticles();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

This only spawns 1 item to the window, how do i make it so it spawns as many items as i <= howManyParticles is going to be?

EDIT: My Final Code

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

$(function(){
    var howManyParticles = 11;
    var bodyWidth = $(document).width();

    function spawnParticles(){
        for(var i = 0; i <= 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 = $("<div class='particle' style='"+ particleStyle +"'>&nbsp;</div>");
            $('body').append(particle);

        }
    }

    spawnParticles();
});

Answer 1

There are some cases where jQuery automatically clones a node for you, and others where it does not. In this case it does not because it thinks you're actually trying to just relocate a node.

Instead of creating the DOM element in advance, create it in the loop.

$(function(){
  var howManyParticles = 11;
  var bodyWidth = $(document).width();
  var randomSpawn = Math.floor(Math.random() * bodyWidth) + 1;
  var particleStyle = "float: left; background: orange; border:1px solid red; width: 10px; height: 10px; margin: 5px;";

  // Just a string------v
  var particle = "<div class='particle' style='"+ particleStyle +"'>&nbsp;</div>";

  function spawnParticles(){
      for(var i = 0; i <= howManyParticles; i++)
      {
 // Append the string, which is turned into a new DOM element on each iteration
          $('body').append(particle);
          console.log('spawned');
      }
  }

  spawnParticles();

console.log("FOUND %s PARTICLES", document.querySelectorAll(".particle").length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>