In my Django application, I have a form with radio buttons for selecting the number of meals per week. The form also includes checkboxes for meal preferences. I have initialized a preselected value for these fields in my form. I use JavaScript to dynamically update a summary section based on preselected selections when page loads.

The radio buttons for meals_per_week are generated by Django and included in the HTML template. If I remove {{ choice.tag }}, the updateSummary function no longer receives the selected value for meals_per_week. How can I fix this issue while still removing {{ choice.tag }}?

Here is the relevant part of my HTML template:

{% for choice in form.meals_per_week %}
<div class="flex-fill mx-1">
    <div class="card mb-4 custom-card" data-input-id="{{ choice.id_for_label }}">
        <div class="card-body text-center">
            <input type="radio" class="hidden-input" id="{{ choice.id_for_label }}" name="{{ choice.name }}" value="{{ choice.choice_value }}" {% if choice.is_checked %}checked{% endif %}>
            {{ choice.tag }}
            <label class="form-check-label d-block" for="{{ choice.id_for_label }}">
                {{ choice.choice_label }}
            </label>
        </div>
    </div>
</div>
{% endfor %}    

And here is my JavaScript function that updates the summary:

async function updateSummary() {
const mealsPerWeek = **parseInt(document.querySelector('input[name="meals_per_week"]:checked').value);**
const mealPreferences = Array.from(document.querySelectorAll('input[name="meal_preference_type"]:checked')).map(el => el.value);

let response = await fetch(`/get_price?meals_per_week=${mealsPerWeek}`);
let data = await response.json();

const pricePerServing = data.price_per_serving.toFixed(2);
const planPrice = (pricePerServing * mealsPerWeek).toFixed(2);

document.getElementById('meal_preference_type').innerText = mealPreferences.join(', ');
document.getElementById('meals_per_week').innerText = mealsPerWeek;
document.getElementById('price_per_serving').innerText = pricePerServing;
document.getElementById('plan_price').innerText = planPrice;
}
document.addEventListener('DOMContentLoaded', () => {updateSummary();
});    

I tried to achieve the same with a simple form without any preselected fields and it worked fine. The reason I want to remove the {{ choice.tag }} is because I do not want to show the radio buttons instead select the cards/values by highlighting the color of my select.

Any help would be appreciated!