WooCommerce/WordPress: how hide entire table form after submit (Admin Dashboard)?

Desired outcome

I want display: none to be applied to the entire table after form submit button is clicked, because once I got the order number ( $order-get_id() ), in a second step I want to display the order details and a second form table to edit the weights of each item (and the initial form table with the list of orders would take too much space). (if required or helpful I can post screenshots of the two form tables).

Observations

I saw that with onsubmit=this.style.display='none' (which I did not combine with the javascript code variations) the table cell holding the submit button clicked briefly became only a few pixels in height (but did not disappear entirely), but reappeared after a few seconds.

Steps including code

I made a plugin with a function hooked to add_menu_page and add_submenu_page 's.

add_menu_page( 
        'Packing-App', // $page_title
        'Pack-App', // $menu_title
        'manage_options', // $capability
        'pg-packapp1', // $menu_slug
        'fn_packapp1', // $function
        'dashicons-tickets', // $icon_url
    54 // $position
);

add_submenu_page( 
        'pg-packapp1', // $parent_slug
        'All Open Orders', // $page_title
        'Open Orders', // $menu_title
        'manage_options', // $capability
        'pg-packapp1', // $menu_slug
        'fn_packapp1' // callable $function = ''
        // int $position = null
);
    
add_submenu_page( 
        'pg-packapp1', // $parent_slug
        'One Open Order', // $page_title
        'One Order', // $menu_title
        'manage_options', // $capability
        'pg-packapp2', // $menu_slug
        'fn_packapp2' // callable $function = ''
        // int $position = null
);

Next, I made a query on on-hold orders.

$on_hold_orders = wc_get_orders( 
    array (
        'limit' = -1,
        'post_type' = 'shop_order',
        'status'    = 'on-hold'
    )
);

Then, I created a form inside a table (wrapped in a div element) using a foreach loop. (For simplicity, I omitted table header and other table cells here...)

$edit_form1 = ' edit';
foreach( $on_hold_orders as $order) {
    ?
    div class=table1 id=table1
    tr
    td    
    form 
        onsubmit=this.style.display='none'
        id=form_1
        name=form_order_id
        action=#
        method=post
        
                
        input 
            type=hidden 
            name=frub_id
            value=?= $order-get_id() ?
        /
        
        input 
            onclick=myClick()
            type=submit 
            name=?= $order-get_id() ?
            value=?= $order-get_id() . $edit_form1 ?
        /
        /form
    /td
    /tr
    /div
    ?php
    }

Once the form submit button is pressed, I want to hide the entire table. I tried some javascript code, but to no avail:

script type=text/javascript
        /* 3rd attempt */
        function myClick(){
            var form = document.getElementById(form_order_id);
            form.style.display = none;
            document.getElementById(table1).style.display = none;
            document.getElementById(form_1).style.display = none;
            document.getElementById(submit).style.display = none;
            document.getElementById(9275).style.display = none;
            document.getElementById(table_id).style.display = none;
            event.preventDefault();
        }
    
        /* 2nd attempt */
        document.getElementById(submit).onclick = function() {
            document.getElementById(table1).style.display = none;
        }
        
        /* 1st attempt */
        document.forms['form_order_id'].addEventListener('submit', function (event) {
            this.style['display'] = 'none';
            event.preventDefault();
        });
/script

P.S. I am still a rookie coder, I am thankful for any aid.