For Loop + Append/AppendTo Issue

For Loop + Append/AppendTo Issue

Hey all.  I am doing a JSON request to get data back from a PHP file.

On the return of that data, I am using a for loop to go through the data and post it up using JS.

Here is my code:

  1. for (var x = 0; x < data.length; x++) {
  2.                    
  3.             //create a container for each comment
  4.             var div = $("<div>").addClass("entry round").appendTo("#characters");
  5.                        
  6.             //add author name and comment to container
  7.             $("<div>").addClass("details").appendTo(div);
  8.             $("<span>").addClass("main-armory button").appendTo("div.details");
  9. }

Now, what is happening, because there is 10 entries being posted, my JS is looking at the class that is being put together (main-armory button) and making it so that class appends every run through.  So, I want one entry for main-armory button and I am getting this:

  1. <div class="details"><span class="main-armory button"></span><span class="main-armory button"></span><span class="main-armory button"></span><span class="main-armory button"></span><span class="main-armory button"></span><span class="main-armory button"></span><span class="main-armory button"></span><span class="main-armory button"></span><span class="main-armory button"></span><span class="main-armory button"></span></div>

And then, when it goes down to the next entry, it has 9 spans, and then the next entry has 8 spans, and it continues all the way down.

What is going on here that I am missing?  I know that I am not clearing a variable properly or something is wrong within my loop.

Any help would be appreciated!