Form Input Checkbox Resets API Response Value When Unchecked?

So I have this app that you select a checkbox & tip and it will show the total amount and add/subtract when you unselect/select other options.

Here is a codepen of the basic app not including the API function https://codepen.io/jaysomo10/pen/mdXoRWz

So you can see from the codepen, the basic checkboxes and tips work completely fine.

I am connected to an API and after I add my delivery address, it will calculate the delivery fee and add it to my total value.

My problem is that once I calculate the delivery fee, then I select a checkbox option, and then I unselect that option, it will reset the total value and now my total value doesn't show the delivery fee included.

Example: I select $10 menu option and then $5 tip so my total is now $15. Then, I go and calculate my delivery fee and it will show $7 delivery fee + the $15 food total which equals $22 for everything. The problem is if I unselect the $10 food item, it will reset the order total from $22 back to the tip value of $5 but my delivery fee is still showing in the HTML as $7 yet the order value total isn't including the delivery fee in the total.

Here is my JS function for the delivery fee. Note this code works completely fine as long as I only select checkboxes and never unselect any. The moment I unselect a checkbox is when the values reset and the order total becomes wrong because it no longer includes the delivery fee.

async function getFee() {
  const payload = getFormValues();
  const finalPayload = JSON.stringify(payload);

  const formInput = document.querySelector("form");
  console.log(formInput);

  if (formInput.checkValidity()) {
    console.log("YES");

    const response = await fetch("/get-fee", {
      method: "POST",
      body: finalPayload,
      headers: { "Content-Type": "application/json" },
    })
      .then(async (response) => {
        const resp = await response.json();
        return resp;
      })
      .catch((rejected) => {
        console.log(rejected);
      });

    const deliveryField = document.getElementById("fee");
    const orderTotal = document.getElementById("total");
    tipVal = document.querySelector(".tips:checked").value;
    window.tips = tipVal;

    foodTotal.textContent = `$${(window.menuItems / 100).toFixed(2)}`;
    tipTotal.textContent = `$${(window.tips / 100).toFixed(2)}`;
    deliveryField.innerHTML = `$${(response.fee / 100).toFixed(2)}`;
    orderTotal.textContent = `$${(
      (Number(window.menuItems) + Number(window.tips) + response.fee) /
      100
    ).toFixed(2)}`;
  } else {
    console.log("You need to fill out the form");
  }

}

My issue is I don't know how to get the response.fee value into my other JS file that allows me to add/subtract the checkbox values and tips.

Basically, the JS file in my codepen doesn't know the delivery fee until after I submit an address, hence the logic for the code simply adds/subtracts the values and it can't include the delivery fee in the total because it doesn't know what it is until I submit that info