Hello once again! I'm working on this fizzbuzz drill. In the snippets below the div js-results gets a nested div named fizz-buzz-item, then fizz-buzz-item gets a class called fizzbuzz and finally the div fizz-buzz-item  gets a span.

I thought snippet 1 expressed the above but it didn't work instead snippet 2 worked. could you please tell me where the difference is...because to me they both should act the same.

for(var i = 1; i <= numberEntered; i++) {       //snippet 1
      if ( i % 15 ===0) {  
       $('.js-results').append('<div class="fizz-buzz-item"></div>');  
       $('.fizz-buzz-item').append('<span></span>');    
       $('.fizz-buzz-item').addClass('fizzbuzz'); 

for(var i = 1; i <= numberEntered; i++) { 

   if ( i % 15 ===0) {  
    $('.js-results').append('<div class="fizz-buzz-item fizzbuzz"><span>fizzbuzz</span></div>');  //snippet 2