javascript - How to add a div element to another div element through jQuery in Wordpress?

I'm building a checkout page in Wordpress with Woocommerce and I would like to change the position of this coupon

I tried using jQuery to add the .woocommerce-form-coupon-toggle coupon class to the ID of the order review table,but the class is not added, and if I call the function itself in the order-review.php file, it gives me an error.

my code:

add_filter( 'woocommerce_checkout_order_review', 'add_class_element');
function add_class_element() {
    ?>
<script type="text/javascript">
jQuery(function($) {
    $('#order_review ').addClass('woocommerce-form-coupon-toggle');
});
</script>
<?php 
}
add_filter( 'woocommerce_checkout_order_review', 'add_class_element');

I also tried to create a jQuery function in an external file and call it in functions.php:

function ws_add_class_to_order_review()
{
    wp_register_script(
        'custom_script',
        get_template_directory_uri() . '/assets/js/main-navigation.js',
        array('jquery'),
        '1.0'
    );
    wp_enqueue_script('custom_script');
}
add_action('wp_enqueue_scripts', 'ws_add_class_to_order_review');

In main-navigation.js:

jQuery( document ).ready( function() {
    jQuery( '#order_review' ).addClass( '.woocommerce-form-coupon-toggle' );
} );

Is there any way I can add the coupon class to the page element? or call it another way?

Solution:

The script in your main-navigation.js is correct, but you need to add extra event because Woocommerce will update the div in #order_review by AJAX when the prices are updated (when customer update shipping address / change the shipping method...).

You can add use Woocommerce event updated_checkout like this

jQuery( '#order_review' ).addClass( '.woocommerce-form-coupon-toggle' );
jQuery(document.body).on('updated_checkout', function(){
    jQuery( '#order_review' ).addClass( '.woocommerce-form-coupon-toggle' );
});