'Retain Woocommerce Cart Custom Select Field on Quantity Change

I have a custom select tag on the Woocommerce cart which is setup as shown below. Everything seems to be working except that once you update the quantity on the cart, any further changes to the select dropdown box is no longer detected so it doesn't save the newly select value. Is there some way to reset it (without reloading the page) so that additional change notifications are captured by the javascript code?

functions.php

// recreate proceeded to checkout button to be a form so custom cart checkout has $_POST data
add_action( 'woocommerce_proceed_to_checkout', 'add_agent_before_proceed_to_checkout', 15 );
function add_agent_before_proceed_to_checkout() {
    remove_action( 'woocommerce_proceed_to_checkout', 'woocommerce_button_proceed_to_checkout', 20 );
    wc_get_template('cart/cart-add-agent.php');
}

cart-add-agent.php

<form id="checkout_form" method="POST" action="<?php echo esc_url ( wc_get_checkout_url() ); ?>">
    <button type="submit" class="checkout-button button alt wc-forward" style="width:100%;"><?php
        esc_html_e( 'Proceed to checkout', 'woocommerce' ) ?></button>
    <div style="margin-top:5px">
        <select id="agent" name="agent">
            <option value="Agent1">Checkout with Agent1</option>
            <option value="Agent2">Checkout with Agent2</option>  
            <option value="Agent3">Checkout with Agent3</option>  
        </select>
    </div>
</form>

Bottom of cart.php

<script type="text/javascript">
    
jQuery(document).ready(function() {
    
    var item = window.localStorage.getItem('agent') || "Agent1";
    document.getElementById('agent').value=item;

    jQuery('#agent').on('change', function() {
        var item = jQuery(this).val();
        console.log("saving selected item " + item);

        window.localStorage.setItem('agent', item);
    });
});

jQuery( document.body ).on( 'updated_cart_totals', function() {
    var item = window.localStorage.getItem('agent') || "Agent1";
    document.getElementById('agent').value=item;
    console.log("selected item " + item);
}); 
    
</script>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source