Как задать условие в форме заказа с помощью JS-скрипта?

Подскажите пожалуйста, как правильно добавить JS-скрипт в форму заказа магазина?
Скрипт работает плохо (через раз отрабатывает).
Что я делаю не так? Может быть есть способ проще?
Возможно я неправильно указываю порядок выполнения скриптов?
Буду благодарен за любую информацию.

Магазин сделан на WP / Woocommerce.
Хочу менять финальную стоимость заказа при выборе способа доставки.

Как у меня сейчас все устроено в данный момент:

Добавляю div-блок в файл form-checkout.php
<?php echo '<div class="new_box_one"></div>' ?>

Далее не нему подцепляю JS-скрипт:

function countDeliverySum() {    let subTotalSum = document.querySelector('.cart-subtotal .woocommerce-Price-amount bdi');    let subTotalSumOnlyNum = subTotalSum.innerHTML.replace(/[^0-9]/g, "");    let totalSum = document.querySelector('.order-total .woocommerce-Price-amount bdi');    let oldBox = document.querySelector('.new_box_one');    let newBoxContent = `        <div class="delivery_new_box">            <div class="location_delivery">                <form action="">                    <input type="radio" name="test" id="location_moscow">                    <label for="radio1_moscow">Москва</label>                        <input type="radio" name="test" id="location_other_city">                    <label for="radio1_mosobl">Московская обл</label>                        <input type="radio" name="test" id="location_other_country">                    <label for="radio1_mosobl">Другая страна</label>                </form>            </div>                        <div class="class_delivery">                <input type="radio" name="test1" id="delivery_type_1">                <label for="delivery_type_1">СДЭК</label>                                <input type="radio" name="test1" id="delivery_type_2">                <label for="delivery_type_2">Почта России</label>                    <input type="radio" name="test1" id="delivery_type_3">                <label for="delivery_type_3">Курьер сегодня</label>                    <input type="radio" name="test1" id="delivery_type_4">                <label for="delivery_type_4">Курьер с примеркой</label>                    <input type="radio" name="test1" id="delivery_type_5">                <label for="delivery_type_5">Самовывоз</label>                    <input type="radio" name="test1" id="delivery_type_6">                <label for="delivery_type_6">Worldwide</label>                    <input type="radio" name="test1" id="delivery_type_7">                <label for="delivery_type_7">СДЭК (Беларусь, Казахстан, Армения)</label>            </div>        </div>    `;    oldBox.innerHTML = newBoxContent;    let location1 = document.querySelector('#location_moscow');    let location2 = document.querySelector('#location_other_city');    let location3 = document.querySelector('#location_other_country');    let deliveryType1 = document.querySelector('#delivery_type_1');    let deliveryType2 = document.querySelector('#delivery_type_2');    let deliveryType3 = document.querySelector('#delivery_type_3');    let deliveryType4 = document.querySelector('#delivery_type_4');    let deliveryType5 = document.querySelector('#delivery_type_5');    let deliveryType6 = document.querySelector('#delivery_type_6');    let deliveryType7 = document.querySelector('#delivery_type_7');    let del1 = 390; // Sdek    let del2 = 1190; // Post of Russia    let del3 = 450; // Courier today    let del4 = 550; // Courier widt fitting    let del5 = 0; // Take by self    let del6 = 3500; // Worldwide    let del7 = 590; // Sdek SNG '₽'    location1.addEventListener('click', function locationOne() {        totalSum.innerHTML = subTotalSumOnlyNum + ' ₽';        deliveryType1.classList.add('active');        deliveryType2.classList.add('active');        deliveryType3.classList.add('active');        deliveryType4.classList.add('active');        deliveryType5.classList.add('active');        deliveryType6.classList.remove('active');        deliveryType7.classList.remove('active');        deliveryType1.addEventListener('click', function() {            let res = 0;            res = Number(subTotalSumOnlyNum) + Number(del1);            totalSum.innerHTML = res + ' ₽';        })        deliveryType2.addEventListener('click', function() {            let res = 0;            res = Number(subTotalSumOnlyNum) + Number(del2);            totalSum.innerHTML = res + ' ₽';        })        deliveryType3.addEventListener('click', function() {            let res = 0;            res = Number(subTotalSumOnlyNum) + Number(del3);            totalSum.innerHTML = res + ' ₽';        })        deliveryType4.addEventListener('click', function() {            let res = 0;            res = Number(subTotalSumOnlyNum) + Number(del4);            totalSum.innerHTML = res + ' ₽';        })        deliveryType5.addEventListener('click', function() {            let res = 0;            res = Number(subTotalSumOnlyNum) + Number(del5);            totalSum.innerHTML = res + ' ₽';        })    });    location2.addEventListener('click', function () {        totalSum.innerHTML = subTotalSumOnlyNum + ' ₽';        deliveryType1.classList.add('active');        deliveryType2.classList.add('active');        deliveryType3.classList.remove('active');        deliveryType4.classList.remove('active');        deliveryType5.classList.remove('active');        deliveryType6.classList.remove('active');        deliveryType7.classList.remove('active');        deliveryType1.addEventListener('click', function() {            let res = 0;            res = Number(subTotalSumOnlyNum) + Number(del1);            totalSum.innerHTML = res + ' ₽';        })        deliveryType2.addEventListener('click', function() {            let res = 0;            res = Number(subTotalSumOnlyNum) + Number(del2);            totalSum.innerHTML = res + ' ₽';        })    });    location3.addEventListener('click', function () {        totalSum.innerHTML = subTotalSumOnlyNum + ' ₽';        deliveryType1.classList.remove('active');        deliveryType2.classList.remove('active');        deliveryType3.classList.remove('active');        deliveryType4.classList.remove('active');        deliveryType5.classList.remove('active');        deliveryType6.classList.add('active');        deliveryType7.classList.add('active');        deliveryType6.addEventListener('click', function() {            let res = 0;            res = Number(subTotalSumOnlyNum) + Number(del6);            totalSum.innerHTML = res + ' ₽';        })        deliveryType7.addEventListener('click', function() {            let res = 0;            res = Number(subTotalSumOnlyNum) + Number(del7);            totalSum.innerHTML = res + ' ₽';        })    });}window.addEventListener("load", (event) => {    countDeliverySum();});

Вот так это выглядит: