Javascript: как я могу отобразить общую стоимость введенных в него значений?

Я создаю проект, который будет служить продуктовым магазином. Клиент нажимает на флажки, а затем нажимает кнопку отправки, вызывая предупреждение, чтобы показать значения, которые были нажаты, и общую цену.

home.html

    <form action = "{% url 'js' %}" method = "POST" id = "menuForm">
      {% for post in posts %}
        {% if post.quantity > 0 %}
            <article class = "media content-section">
              <div class = "media-body">
                <div class = "article-metadata">
                  <a class = "mr-2">{{ post.category }}</a>
                </div>
                <h2><a class = "article-title" >{{ post.title }}</a></h2>
                <p class = "article-content"> Price: ${{ post.Price }}</p>
                <p class = "article-content"> Sale: ${{ post.Sale }}</p>
                <input type = "checkbox" id = "product_{{ post.id }}" value = "{{ post.title }}" form = "menuForm" name = "products" > Inventory count: {{ post.quantity }}
              </input>
              </div>
            </article>
        {% else %}
        {% endif %}
      {% endfor %}
      <button id = "btn" type = "submit" form = "menuForm">Confirm Purchase</button>
    </form>
<script src = "{% static "JS/javascript.js" %}" type = "text/javascript"></script>

javascript.js

function getSelectedCheckboxValues(name) {  
    const checkboxes = document.querySelectorAll(`input[name = "${name}"]:checked`);
    let values = [];
    checkboxes.forEach((checkbox) => {
        values.push(checkbox.value);
    });
    return [values];
    console.info(getSelectedCheckboxValues('products'))
}

console.info(values)
var price = 0;
var tPrice = 0;
for (var i = 0;i<values.length;i++){
    if (values[i] == 'Milk'){
        var MPrice = 3.99
        tPrice = price+MPrice;
    }
    if (values[i] == 'Cheese'){
        var CPrice = 4.50
        tPrice = price + CPrice;
    }
    if (values[i] == 'Yogurt'){
        var YPrice = 1.99
        tPrice = price + YPrice;
        }
console.info(values[i])
}

const btn = document.querySelector('#btn');
btn.addEventListener('click', (event) => {
    alert('You ordered: ' + getSelectedCheckboxValues('products')+
        '\nTotal Price: $' + tPrice );
});

Моя проблема на данный момент заключается в том, что в предупреждении отображаются только выбранные значения. Однако он не печатает общую цену. Если кто-нибудь может помочь мне с этим, я был бы очень признателен.