How can I conditionally allow or prevent submission execution?

Question

The situation

I have a page in which I have multiple forms keeping track of the attendance and one progress_update.

On submit of the progress_update form I have got it so that ajax sends the attendance form submissions separately having used the preventdefault() method to stop the original submission, however I would like to on the condition that no errors were returned by the ajax methods allow the original submission that was originally prevented.

What I have so far:

The ajax function:

    function send_attendance(name, lesson, form_id, i) {
        
        
        var url = '/attendance/' + name + '/' + lesson
       
        $('#error-' + i).hide('slow')
        $('#error-' + i).html('')
            $.ajax({
                type: "POST",
                url: url,
                data: {
                    attended: $('#attended' + i).val(),
                    score: $('#score' + i).val(),
                    writing: $('#writing' + i).val(),
                    speaking: $('#speaking' + i).val()},
                success: function(data) {
                    if (data.data.message == undefined) {
                        allow=false;
                        if (data.data.score[1] == undefined) {
                            var error_data = data.data.score[0]
                        } else {
                            var error_data = data.data.score[1]
                        }
                        $('#error-' + i).show('slow')
                        $('#error-' + i).html('<p  style="color:red;">' + error_data + '</p>')
                    } else {
                        
                        console.log(data.data.message)  // display the returned data in the console.
                    }
                }
            });      
    }

The Intention:

The intention behind this ajax is to send the forms to a separate route for validation and then on success "receiving data.data.message == 'submitted'" pass to the next form in the loop, while on error set the allow variable to false and display the message in hopes to prevent the final form being submitted at the same time.

The call:

    $('#update_form').submit(function (e) {
            
            var allow = true;
            for (var i = 0; i < studentcount ; i++) {
                send_attendance(name=st[i], lesson=lesson, form_id='attendance-' + i, i=i)
            }
            if (allow == true){
            } else {
                e.preventDefault();
            }
        });

The Problem

In doing what I have done I have ended up with a situation of it either submits the ajax submitted forms and that is that preventing the submit form or it submits the form whether errors occured in the ajax that need to be displayed, now how do I get this to work in the way expected? I have tried the methods involved in these previous questions:

How to reenable event.preventDefault?

How to unbind a listener that is calling event.preventDefault() (using jQuery)?

which revolve around using bind and unbind but this doesn't seem to work as needed and results in a similar error.

Any advice would be greatly appreciated.

Edit:

I have adjusted the code based on the comment below to reflect, however it still seems to be evaluating the allow before the ajax have completed. either that or the ajax function isn't changing the allow variable which is set in the submit() call how could i get this to change the allow and evaluate it after the ajax calls are complete?

The Ajax call

    function send_attendance(name, lesson, form_id, i) {
        
        var url = '/attendance/' + name + '/' + lesson
        $('#error-' + i).hide('slow')
        $('#error-' + i).html('')
        var form = $('#' + form_id)
        $.ajax({
            type: "POST",
            url: url,
            data: $('#'+ form_id).serialize(),
            context: form,
            success: function(data) {
                console.log('done')
                if (data.data.message == undefined) {
                    allow = false;
                    if (data.data.score[1] == undefined) {
                        var error_data = data.data.score[0]
                    } else {
                        var error_data = data.data.score[1]
                            
                    }
                    $('#error-' + i).show('slow')
                    $('#error-' + i).html('<p  style="color:red;">' + error_data + '</p>')
                } else {
                        
                    console.log(data.data.message)  // display the returned data in the console.
                }
            }
        });

The function is being called here:

    $('#update_form').submit(function (e) {
            e.preventDefault();
            var allow = true;

            var deferreds = [];

            for (var i = 0; i < studentcount ; i++) {
                deferreds.push(
                    send_attendance(st[i], lesson, 'attendance-' + i, i));
            }

            $.when(...deferreds).then(function() {
                if (allow == true){
                    console.log('True')
                } else {
                    console.log('False')
                }
            });

I also tried:

    $('#update_form').submit(function (e) {
            e.preventDefault();
            var allow = true;

            var deferreds = [];

            for (var i = 0; i < studentcount ; i++) {
                deferreds.push(
                    send_attendance(st[i], lesson, 'attendance-' + i, i));
            }

            $.when.apply(deferreds).done(function() {
                if (allow == true){
                    console.log('True')
                } else {
                    console.log('False')
                }
            });