Submit multiple forms not working

I am trying to implement a functionality where a website admin can delete multiple content at once by checking the checkboxes and then clicking the SELECTED button as shown below.

That means I have to submit multiple forms at once and I looked up a workaround online but I can't seem to get it working. Upon clicking the SELECTED button, the deleteRecords() is called. The code's shown below:

function deleteRecords() {

    //--- Creating array of selected rows ---
    var arrayOfIDs;
    arrayOfIDs = $('#table-style').find('[type="checkbox"]:checked').map(function(){
            return $(this).closest('tr').find('td:nth-child(2)').text();
        }).get();   

        //-- Declaring variables ---
        var delFlagForm;   //-- form
        var action;        //-- form action
        var formID;        //-- form id
        var submitFormStr; //-- string of forms' id's 

        //--- Creating form for each row selected ---
        for (var i = 0; i < arrayOfIDs.length; i++) {
            delFlagForm = document.createElement("form"); //-- Creating form 
            action = "/delete_flag/" + arrayOfIDs[i];            //-- Creating action link
            formID = 'form' + i;                          //-- Creating id (form0, form1, etc)
            delFlagForm.setAttribute("id", formID);       //-- Assigning id to form
            delFlagForm.setAttribute("method", "post");   //-- Assigning method to form 
            delFlagForm.setAttribute("action", action);   //-- Assigning action to form 

            //--- Creating string of forms' id's
            if (i != 0) submitFormStr += ' #' + formID;
            else submitFormStr = '#' + formID; 
        }

        //--- Submiting forms at once ---
        //-- For the table shown above, submitFormStr = "#form0 #form1" 
        $(submitFormStr).submit(); // = $('#form0 #form1').submit();
}

So apparently the code displayed above, should be submiting form0 and form1 thus deleting the selected records. But, for some reason, the forms aren't submitted and nothing happens at all.

Can you spot any error?

----------- EDIT - SOLUTION -----------

In order to solve this problem, I tried ignoring the requests by using AJAX and is working now. Here's what the new code looks like:

<script>
        function deleteRecords() {
            var arr;
            arr = $('#table-style').find('[type="checkbox"]:checked').map(function(){
                return $(this).closest('tr').find('td:nth-child(2)').text();
            }).get();   

            var delFlagForm;
            var action; 
            var formID;
            var submitFormStr;

            for (var i = 0; i < arr.length; i++) {
                delFlagForm = document.createElement("form");
                action = "/delete_flag/" + arr[i];
                formID = 'form' + i;
                delFlagForm.setAttribute("id", formID);
                delFlagForm.setAttribute("method", "post");
                delFlagForm.setAttribute("action", action);

                ignoreRequest(delFlagForm);
            }
        }

        function ignoreRequest(form) {
            var formID = $('#' + form.id);
            var action = form.action;
            $.ajax({
                type: "POST",
                url: action, //action
                data: formID,

                success: function (data) {
                    location.reload();
                },
                error: function(jqXHR, text, error){
                    console.log(error);
                }
            });
            return false;
        }
    </script>

It is not possible to submit multiple forms simultaneously. This is logical, since the default behavior when you submit a form is that the server's response is loaded as a new page.

Instead, I would recommend that you either change your HTML so that all of the values you need to submit are inside of a single form, or create an object that contains the values you want to submit, and send them to your server using AJAX (http://api.jquery.com/jquery.ajax/) instead.