How to validate how many checkboxes were clicked and show error message?

I have the following problem to validate checkboxes.

My template has 5 different manners for each of the products in my business.

Within each modality the user must select the ice cream tastes that they want, but each product admits a minimum of 0 and a maximum of N tastes.

   <!-- Modales -->
    <div id="vasoModal" class="modal">
        <div class="modal-content">
            <h4 class="modal-title">Vasito</h4>
            <h6>Seleccione hasta dos gustos</h6>
            <form id="vasitoForm" method="post">
                <table class="tabla">
                        <tr th:each="gusto : ${gustos}">
                            <td class="flavour" th:text="${gusto.nombre}"></td>
                            <td><input class="single-checkbox" type="checkbox" th:value="${gusto.id}" name="box"/></td>
                            <input type="hidden" id="formVasito" value="vasito" />
                        </tr>
                </table>
                <p id="errorModalVasito"></p>
                <button type="submit" class="btn-submit">Enviar Pedido</button>
            </form>
        </div>
    </div>
    <div id="cucuModal" class="modal">
        <div>
            <div class="modal-content">
                <h4 class="modal-title">Cucurucho</h4>
                <h6>Seleccione hasta dos gustos</h6>
                <form id="cucuForm" method="post">
                    <table class="tabla">
                        <tr th:each="gusto : ${gustos}">
                            <td class="flavour" th:text="${gusto.nombre}"></td>
                            <td><input class="single-checkbox" type="checkbox" th:value="${gusto.id}" name="box"/></td>
                            <input type="hidden" id="formCucu" value="cucurucho" />
                        </tr>
                    </table>
                    <p id="errorModalCucu"></p>
                    <button type="submit" class="btn-submit">Enviar Pedido</button>
                </form>
            </div>
        </div>
    </div>
    <div id="cuartoModal" class="modal">
        <div>
            <div class="modal-content">
                <h4 class="modal-title">1/4 Kilo</h4>
                <h6>Seleccione hasta dos gustos</h6>
                <form id="cuartoForm" method="post">
                    <table class="tabla">
                        <tr th:each="gusto : ${gustos}">
                            <td class="flavour" th:text="${gusto.nombre}"></td>
                            <td><input class="single-checkbox" type="checkbox" th:value="${gusto.id}" name="box"/></td>
                            <input type="hidden" id="formCuarto" value="cuarto" />
                        </tr>
                    </table>
                    <p id="errorModalCuarto"></p>
                    <button type="submit" class="btn-submit">Enviar Pedido</button>
                </form>
            </div>
        </div>
    </div>
    <div id="medioModal" class="modal">
        <div>
            <div class="modal-content">
                <h4 class="modal-title">1/2 Kilo</h4>
                <h6>Seleccione hasta tres gustos</h6>
                <form id="medioForm" method="post">
                    <table class="tabla">
                        <tr th:each="gusto : ${gustos}">
                            <td class="flavour" th:text="${gusto.nombre}"></td>
                            <td><input class="single-checkbox" type="checkbox" th:value="${gusto.id}" name="box"/></td>
                            <input type="hidden" id="formMedio" value="medio" />
                        </tr>
                    </table>
                    <p id="errorModalMedio"></p>
                    <button type="submit" class="btn-submit">Enviar Pedido</button>
                </form>
            </div>
        </div>
    </div>
    <div id="kiloModal" class="modal">
        <div>
            <div class="modal-content">
                <h4 class="modal-title">1 Kilo</h4>
                <h6>Seleccione hasta cuatro gustos</h6>
                <form id="kiloForm" method="post">
                    <table class="tabla">
                        <tr th:each="gusto : ${gustos}">
                            <td class="flavour" th:text="${gusto.nombre}"></td>
                            <td><input class="single-checkbox" type="checkbox" th:value="${gusto.id}" name="box"/></td>
                            <input type="hidden" id="formKilo" value="kilo" />
                        </tr>
                    </table>
                    <p id="errorModalKilo"></p>
                    <button type="submit" class="btn-submit">Enviar Pedido</button>
                </form>
            </div>
        </div>
    </div>

Vasito --- maximum 2 tastes

Cucurucho --- maximum 2 tastes

Fourth --- maximum 2 tastes

Medium --- maximum 3 tastes

Kilo --- maximum 4 tastes

I'm trying to do it like that but it does not work for me:

/* Validar checkboxes clickeados */
var checkboxes = document.querySelectorAll('.single-checkbox');
var clickeados = new Array();
var checked = 0;

checkboxes.forEach(elem => {
    elem.addEventListener('change', (event) => {
        event.stopPropagation();
        if(elem.checked) {
           if(!clickeados.includes(elem)){
                   clickeados.push(elem);
           }
           checked ++;
           console.log(checked);
        }
        else{
            if(clickeados.includes(elem)){
                   clickeados.pop(elem);
            }
            checked --;
            console.log(checked);
        }
    });
});

/* Validar cuantos gustos fueron seleccionados antes de hacer el submit */
const formVasito = document.getElementById('vasitoForm');
if(checked > 0 && checked < 3){
    formVasito.addEventListener('submit',(event) => {
       const seleccionados = new FormData(formVasito);
       var formName = document.getElementById('formVasito').value;
      $('#vasitoForm').attr('action', seleccionados + '/' + formName + '/pedido');
    });
}
else{
    document.getElementById('errorModalVasito').innerHTML = "Debe seleccionar hasta dos gustos";
}

The checked by console I get it right, I mean, it recognizes the checked and unchecked but when the submit is done it goes back to the same page, which it should not, I mean something goes wrong with the logic: (

Any ideas?