Show/hide order notes on checkout page

I would like to keep the order notes textarea hidden until someone wants to add a comment on the checkout page. I have managed to frankenstein a solution that works, however, upon clicking the link to reveal the textarea it also triggers the submit button as it displays the woocommerce_error message: “Please read and accept the terms and conditions to proceed with your order.” and moves the screen up to see it.

Can someone have a look at my code and see how to suppress the error and the subsequent movement of the page please?

function md_custom_woocommerce_checkout_fields( $fields ) 
{
    $fields['order']['order_comments']['placeholder'] = 'Add comments about your order (optional)';
    $fields['order']['order_comments']['label'] = '<button id=\"comment\">Add a comment +</button>';

    return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'md_custom_woocommerce_checkout_fields' );


function showhide_enqueue() {
    if(is_page( 11 )) {
        wp_enqueue_script( 'ui', get_template_directory_uri() . '/js/ui/jquery-ui.min.js', [], '1.8', true);
        wp_add_inline_script( 'ui',
            'jQuery(window).load(function() {
                jQuery(document).ready(function() {
  jQuery("#comment").click(function() {
    jQuery(".woocommerce-additional-fields span.woocommerce-input-wrapper").toggle();
  });
});
            });' );
    }
}
add_action('wp_enqueue_scripts', 'showhide_enqueue');


add_action( 'wp_footer', 'show_hide_commentbox' );
function show_hide_commentbox() {
	if(is_page(11)) {
    ?>
    <script type="text/javascript">
        jQuery(function($){
            $('.cart_totals .subtotal-coupon td').click(function(){
                $('.cart_totals .subtotal-coupon .coupon').toggle();
                $('.cart_totals .subtotal-coupon .add-coupon').text( $(this).text() == '+' ? '-' : '+' );
            });
        });
    </script>
    <?php
}}