JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1" class="target"></div>
<div id="div2" class="target"></div>

JavaScript

( function( $ ) {
    
    $.fn.when = function( events ) {
        
        var deferred, $element, elemIndex, eventIndex;
        
        // Get the list of events
        events = events.split( /\s+/g );
        
        // We will store one deferred per event and per element
        var deferreds = [];
        
        // For each element
        for( elemIndex = 0; elemIndex < this.length; elemIndex++ ) {
            $element = $( this[ elemIndex ] );
            // For each event
            for ( eventIndex = 0; eventIndex < events.length; eventIndex++ ) {
                // Store a Deferred...
                deferreds.push(( deferred = $.Deferred() ));
                // ... that is resolved when the event is fired on this element
                $element.one( events[ eventIndex ], deferred.resolve );
            }
        }
        
        // Return a promise resolved once all events fired on all elements
        return $.when.apply( null, deferreds );
    };
    
} )( jQuery );

// Example
function inDomLog( msg ) {
    jQuery( "<div/>" ).text( msg ).appendTo( "body" );
}

jQuery( ".target" ).when( "custom1 custom2" ).done( function() {
    inDomLog( "ALL TRIGGERED" );
} );

jQuery.each( [ "div1", "div2" ], function( _, id ) {
    var element = jQuery( "#" + id );
    jQuery.each( [ "custom1", "custom2" ], function( _, event ) {
        setTimeout( function() {
            inDomLog( "triggering " + event + " on " + id );
            element.trigger( event, [] );
        }, Math.floor( 2000 * Math.random() ) );
    } );
} );