Input Checkbox Only Updates One Value But Other Inputs Don't Update?

So I have this app I made where it calculates the menu items total and includes a $5 delivery fee. The problem is the 4th option only includes the $5 fee in the total, but the other 3 options don't include the fee

Here's my codepen https://codepen.io/shodoro/pen/dydNopX

Why is my 4th option, the smoothie $4 the only input checkbox that adds the delivery fee correctly?

The first 3 options don't include the $5 delivery fee in the total and I don't know how to fix it

Here's my JS

      function updatePrice() {
          let items = 0;
          let deliveryFee = document.getElementById('fee')
          let tax = document.getElementById('tax')    
          let tip = document.getElementById('tip')

          tax = .1
          tip = .2

          document.querySelectorAll('input[type=checkbox]').forEach(checkBox => {
              if (checkBox.checked) {
                  items += +checkBox.value
                  deliveryFee = 5
              } else {
                  deliveryFee = 0
              }
          })


          document.getElementById("price").textContent = `Food Total: $${(items).toFixed(2)}`;
          document.getElementById("tax").textContent = `Tax (10%): $${(items * tax).toFixed(2)}`;
          document.getElementById("tip").textContent = `Tip (20%): $${(items * tip).toFixed(2)}`;
          document.getElementById("total").textContent = `Your order total is: $${((items * tax)+(items * tip)+(items)+(deliveryFee)).toFixed(2)}`;
      }

Essential I want all options to include the delivery fee when clicking them, but also making sure the delivery fee resets to 0 whenever you uncheck all options.