title: Running Ajax request inside .each loop one after another
body: <p>I'm trying to find a way to run each Ajax post request one after another but waiting for the one beforehand to complete before running the next. I've tried a couple of methods to no avail so I've stripped it back down to the basics and am wondering that the best way (and a way that works) to go about this is.</p>
  
  <p>When they are run as they do now, some of the requests never make it through because it seems to be interrupted by the next request.</p>
  
  <pre><code>$('.element').each(function() {
          e_id = $(this).attr('data-id');
          $.ajax({
              url: '/?cart-add=' + e_id +'&amp;quantity=1',
              type: 'POST'
          });
      });
  )};
  </code></pre>
  
  <p>Then once that is completed in full I was redirecting to another page which was working correctly but the above requests were an issue as not all items were showing up yet as it went through each iteration it was logging the id to console which were as expected.</p>
  
  <pre><code>window.location.href = "http://stackoverflow.com";
  </code></pre>