title: Jquery. Calling a function after .each loop with ajax calls
body: <p>I've been searching online for hours and I know that I probably have to do something with the deferred objects, but I can't get it done.</p>
  
  <p>Firstly, here is my code:</p>
  
  <pre><code>$('#uploadButton').on('click', function () {
      //some preparation stuff (deleted)
      var panels = boxesContainer.find('.panel');
      var ajaxes = [];
  
      $.each(panels, function (index, panel) {
          //more preparation + declaration of variables
  
          function getIdAndPrepareData() {
              $.when(
              $.ajax({
                  type: 'POST',
                  url: 'url',
                  data: {
                      'title': name
                  }
              }))
                  .done(function (result, textStatus, jqXHR) {
                  if (result.success) {
                      var id = result.id;
                  } else {
                      getIdAndPrepareData();
                  }
  
                  console.log('Created Id: ' + id);
  
                  $.each(panelForms, function (index, form) {
                      var filesInput = //again, prep and vars 
  
                      $.each($(filesInput)[0].files, function (index, file) {
                          var formData = new FormData();
                          formData.append('file', file);
                          //more stuff
                          ajaxes.push({
                              'formData': formData,
                              'file': file
                          });
                      });
                  });
  
              }).fail(function () {
                  getIdAndPrepareData();
              });
          }
  
          getIdAndPrepareData();
  
      });
  
      $.ajax().promise().done(function () {
          console.log('bla bla bla');
      });
  });
  </code></pre>
  
  <p>So, basically, I am looping through certain DIV's (.panels) and creating a new database entity via ajax for them. Then I am preparing data to be sent to server via ajax, after all the loops complete. And I need to send this data after all the loops with ajax, because the next ajax calls (that I am planning to make after the iterating through .panels and preparing data) are going to create another entities that will be related with the entities created for .panel DIV's ( I push all this data to ajaxes array, and plan to use it leter on ).</p>
  
  <p>I am using jQuerys deferred objects inside panels loop in order to get the newly created ID of the panel, and hold it in the ajaxes array. But I do not know how to execute any code after the panels loop.</p>
  
  <p>I tried to make a promise (I am quite new to this technique) for all ajax calls at the end ( $.ajax().promise().done ), but id doesn't seem to work. Sometimes the console.log in the promise, fires at the end, sometimes at the beginning.</p>
  
  <p>I am not an expert in jQuery and JS, so I would like to ask for some explanations how to work with asynchronous ajax calls inside loops and what should I do in this situation? I want to execute some code at the end, after all the data is prepared.</p>
  
  <p>Thank you.</p>