JSFiddle - React, Tailwind, and code Playground

by TrueBlueAussie

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="output">Start</div>

JavaScript

function syncAll() {
        var promise = $.when();
        var forms = [
        	{'name':'form 1'},
          {'name':'form 2'},
          {'name':'form 3'}, 
          {'name':'form 4'}];

        $.each(forms, function (index, value) {
            promise = promise.then(function(){
            	var def = new $.Deferred();
              setTimeout(function () {
              		$("#output").html("Syncing: " + value.name);
                  def.resolve({ 'message': 'finito!' });
              }, 3000);
            	return def.promise();
            });
        });
        return promise;
    }
    
    
    $.when(syncAll()).done(function(response){
        $("#output").html(response.message);
    });