woocommerce_cart_calculate_fees: Update Fee on custom input change

Question

Image Issue Example

---

At the WooCommerce "checkout" page:

I would like to input any number in the "Custom Fee Input"
- then it will be calculated in the "Total price table".
- After placing order the "Custom Fee" will be auto synchronized into the database.

---

Recommendation: using Plain JavaScript instead of jQuery is highly appreciated.

---

This is my codes:

html

<label>
    Custom Fee
    <input id="custom_fee" name="custom_fee" type="number" required>
</label>

Plain JavaScript

var $custom_fee = document.getElementById("custom_fee");

$custom_fee.addEventListener("change", function(){

    var data = {
        action: 'custom_fee',
        security: wc_checkout_params.apply_state_nonce,
        custom_fee_cost: $custom_fee.value,
    };

    var request = new XMLHttpRequest();
    request.open('POST', wc_checkout_params.ajax_url, true);
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');

    request.onload = function() {
        if (this.status >= 200 && this.status < 400) {
            var resp = this.response;
            console.log(resp);
        } else {
            var resp = this.response;
            console.log(resp);
        }
    };

    request.send(data);

});

function.php

add_action('wp_ajax_custom_fee', 'custom_fee_ajax', 10);
add_action('wp_ajax_nopriv_custom_fee', 'custom_fee_ajax', 10);

function custom_fee_ajax() {
    if( ! is_checkout() ) return;
    global $wpdb;
    if( isset($_POST['custom_fee']) ){
        $custom_fee = $_POST['custom_fee'];
        WC()->session->set( 'custom_fee', $custom_fee );
        echo json_encode( WC()->session->get('custom_fee' ) );
    }
    die();
}

//________________________________________________________

add_action('woocommerce_cart_calculate_fees', 'custom_fee');

function custom_fee() {
    if( ! is_checkout() ) return;
    session_start();
    global $woocommerce;
    if ( !defined( 'DOING_AJAX' ) ) return;
    $fee = $_SESSION['custom_fee'];
    $woocommerce->cart->add_fee( 'Custom Fee' , $fee, true, '' );
}

---

NOTE: The above code does not work correctly (bad request 400; php functions); so I would like to have someone help I to solve this issue.