JSFiddle - React, Tailwind, and code Playground
HTML
<ul id="myList">
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
<button id="saveMyListItems">save</button>
JavaScript
$('#saveMyListItems').click(function (event) {
event.preventDefault();
var ajaxCounter = {
goal: $('ul#myList li').length,
total: 0,
success: 0,
notmodified: 0,
error: 0,
timeout: 0,
abort: 0,
parsererror: 0
}
$('ul#myList li').each(function () {
$.ajax({
url: '/echo/html',
type: "POST",
timeout: 1500,
data: {
html: "foobar",
delay: Math.floor(Math.random() * 5)
},
complete: function (jqXHR, textStatus) {
ajaxCounter.total++
ajaxCounter[textStatus]++;
if (ajaxCounter.total >= ajaxCounter.goal) {
alert(ajaxCounter.success + ' out of ' + ajaxCounter.total);
}
},
});
});
});