JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

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

        $.each(forms, function (index, value) {
            var def = new $.Deferred();
            setTimeout(function () {
            		$("#output").html("Syncing: " + value.name);
                def.resolve({ 'message': 'finito!' });
            }, 3000);
            promises.push(def);

        });
        
        return $.when.apply(undefined, promises).promise();
    }
    
    
    $.when(syncAll()).done(function(response){
        $("#output").html(response.message);
    });
    /*
    syncAll().done(function (response) {
      $("#output").html(response.message);
    }));
    */