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.