Create divs and load each with a file based on ajax call

Question

So I have the below code which is supposed to get a directory of html files, take each one, and load the contents into a new div with the class ".module". My directory and file names are retrieved correctly, a new div is created correctly, but the problem is that only one div is created and it is only loaded with the content from the last file in the directory. Can't seem to figure out why!

   $(document).ready(function() {
        $.ajax({
           url: 'modules/',
           dataType: 'json',
           cache: false,
           success: function(data) 
              {
                 $(data).each
                    (function() 
                       {
                             var filename = this;
                             console.log(filename);
                          $('#wrapper').html('<div class="module editable moveable deletable">');
                          $('#wrapper').append('</div>');
                          $('.module:last-of-type').load("modules/"+ filename);
                       });
              },
              error: function(error){
                 console.log('failed with error ' + error.status);
              }
        });
     });

Answer 1

Replace your .each() with this:

$(data).each(function() {
  var filename = this;
  console.log(filename);
  $('#wrapper').append($("<div>").addClass("module editable moveable deletable"));
  $('.module:last-of-type').load("modules/" + filename);
});