title: Add multiple items to shopping cart with AJAX, only one is processed
body: <p>I have a shopping cart to which items are added with an AJAX request. The request posts to Laravel 5.4. It all works fine when I click multiple 'Add To Cart' buttons slowly after each other. Then the AJAX requests aren't executed at the same time. But when I click those buttons fast after each other, the AJAX requests are executed at the same time and only one item is added to the cart.</p>
  
  <p>The jQuery:</p>
  
  <pre><code>$('.add-to-cart').on('click', function (event) {
      // Get the product/service ID.
      var item = $(this).attr('data-id');
  
      $.post('/cart', {
          action: 'addItem',
          data: item
      }, 'json').done(function (response) {
          // Hide .add-to-cart and show .go-to-checkout
      });
  });
  </code></pre>
  
  <p>The PHP:</p>
  
  <pre><code>public function addItem(Request $request)
  {
      // Get item from request.
      $item = $request-&gt;get('data');
  
      // Store item in session.
      $request-&gt;session()-&gt;push('cart.items', [$item]);
  
      // Return JSON response.
      return response()-&gt;json([]);
  }
  </code></pre>
  
  <p>When I use <code>async: false</code> in my AJAX request, all items are added to the cart, no matter how fast I add them. But because that option is deprecated, it doesn't feel right to use it. I've also looked at alternatives like Promises, but I don't know how to use them in my case.</p>
  
  <p>I'm trying to figure out why only one item is being processed when multiple items are being added quickly after each other. Hope you guys can help me out!</p>