How do I submit multiple forms with ajax and await all results?

Question

I want to submit all the forms on my page and when that is done, continue with some other code:

const forms = $("form");
let ajaxForms = []

forms.each(function () {
    let self = $(this)
    // Override submit function for every form
    self.submit(function (event) {
        event.preventDefault();
        return $.ajax({
            data: self.serialize(),
            type: self.attr('method'),
            url: self.attr('action'),
            success: function (response, status, jqXHR) {
                console.log(response); // Problem: This gets logged AFTER the log below
            }
        });

    });
    
    ajaxForms.push(self.submit());

});


$.when.apply($, ajaxForms).done(function () {
    // Continue here after all forms are submitted.
    console.log("all ajax form submits done"); // Problem: This logs BEFORE the logs above
});

I tried to adapt this and this answer and I don't know why it's not working in my case.