EDIT:
See the edits below, but perhaps you were trying to change the class attribute of each ul.level. If that's the case, you need to do this:
--> scroll to the right to see the class being updated with the index number -->
$('.grouplist').append('<div class="list-group"><h3>'+listGroupTitle+'</h3><ul class="level' + index + '"></ul></div>');
Then this:
$('<li>'+text+'</li>').appendTo('ul.level' + index);
I think the first method I used is probably a better one, unless you are going to use these classes as identifiers.
Original:
You are appending the .children() to each instance of ul.level, so the second time around, the first one you created is receiving the children again.
You need to reference each newly created <ul> and just append to that.
$(function(){ $.get('career-utility.xml',function(myData){ $(myData).find('listgroup').each(function(index){ var listGroup = $(this); var listGroupTitle = $(this).attr('title'); var shortNote = $(this).attr('shortnote'); var subLink = $(this).find('sublist'); var firstList = $(this).find('list'); var $newElement = $('<div class="list-group"><h3>'+listGroupTitle+'</h3><ul class="level">'+index+'</ul></div>'); var $newUL = $newElement.find('ul.level'); $(this).children().each(function(num){ var text = $(this).text(); $newUL.append('<li>'+text+'</li>'); }); $('.grouplist').append( $newElement ); }) }) })
EDIT: The issue explained in more detail.
First pass
You append the new container to the document.
<div class="list-group"> <h3>first title</h3> <ul class="level">0</ul> </div>
Then you append the children:
<div class="list-group"> <h3>first title</h3> <ul class="level">0 <li>first pass - first child</li> <li>first pass - second child</li> <li>first pass - third child</li> <li>first pass - fourth child</li> <li>first pass - fifth child</li> <li>first pass - sixth child</li> </ul> </div>
Second pass
You append the new container to the document.
<div class="list-group"> <h3>first title</h3> <ul class="level">0 <li>first pass - first child</li> <li>first pass - second child</li> <li>first pass - third child</li> <li>first pass - fourth child</li> <li>first pass - fifth child</li> <li>first pass - sixth child</li> </ul> </div> <div class="list-group"> // New Container here <h3>second title</h3> <ul class="level">1</ul> </div>
Then you append the children, but note that your selector is ul.level, so you are appending to both instances of ul.level:
<div class="list-group"> <h3>first title</h3> <ul class="level">0 <li>first pass - first child</li> <li>first pass - second child</li> <li>first pass - third child</li> <li>first pass - fourth child</li> <li>first pass - fifth child</li> <li>first pass - sixth child</li> <li> second pass - first child</li> <li> second pass - second child</li> <li> second pass - third child</li> <li> second pass - fourth child</li> <li> second pass - fifth child</li> <li> second pass - sixth child</li> </ul> </div> <div class="list-group"> <h3>second title</h3> <ul class="level">1 <li> second pass - first child</li> <li> second pass - second child</li> <li> second pass - third child</li> <li> second pass - fourth child</li> <li> second pass - fifth child</li> <li> second pass - sixth child</li> </ul> </div>
