JSFiddle - React, Tailwind, and code Playground

by pleinx

HTML

<div class="cart">
 <div class="element" data-id="1">p1</div>
 <div class="element" data-id="2">p2</div>
 <div class="element" data-id="3">p3</div>
 <div class="element" data-id="4">p4</div>
 <div class="element" data-id="5">p5</div>
 <div class="element" data-id="6">p6</div>
 <div class="element" data-id="7">p7</div>
 <div class="element" data-id="8">p8</div>
 <div class="element" data-id="">p9</div>
 <div class="element">p10</div>
</div>

<!-- You see the product #4 will never reached and loop has stopped! -->

CSS

.cart .element {
  padding: 20px;
  background: red;
  float: left;
  margin: 10px;
  text-align: center;
}

.cart .element span {
  font-size: 11px;
}

.cart p {
  background: blue;
  padding: 5px;
  color: white;
}

JavaScript

var stopAjax = false;
var $elements = $('.element');
  $elements.each(function() {
    if(stopAjax) return;

    var $element = $(this);
    var elementId = $element.attr('data-id');
    var url = '/echo/js/?js=product_'+elementId; // faked url to get response

    if(!elementId) {
      // now we fake that elementId 3 produce an error
      url = 'myfail.php';
    }

    $.ajax({
      url: url, // /?cart-add=' + e_id +'&quantity=1
      type: 'POST',
      async: false,
      success: function() {
        $element.css('background', 'yellow');
        $element.append('<br><span>success!</span>');
        $element.append('<br><span>count: '+$element.index()+'</span>');
        
        if($element.index() === ($elements.length - 1)) {
         redirect();
        }
      },
      error: function() {
        stopAjax = true;
        $element.append('<br><span>failed!</span>');
        $element.append('<br><span>count: '+$element.index()+'</span>');
        
        redirect();
      }
    });
  });
 
  function redirect() {
     $('.cart').append('<br style="clear:both"><p>redirect or do what ever your want todo :-) !</p>');
  }