My digiNextStepMobil does not get called properly and the form does not go the step2, when I press the button.

HTML

<form id="digi-productGuideForm-mobil">

        <div id="digi-step1-1" class="digi-step">
              <h2>Hvor skal ladestanderen placeres?</h2>
                  <label><input id="beskrivelser" type="radio" name="placement" value="commonParking">Fælles p-plads</label><br>
                  <label><input type="radio" name="placement" value="parkingGarage"> P-kælder</label><br>
                  <label><input type="radio" name="placement" value="residentParking"> Beboerens egen p-plads</label><br>

                  <nav id="digi-buttons">
                  <button type="button" id="digi-næsteKnap1" onclick="digiNextStepMobil()">Næste</button>
                  </nav>
        </div>

        <div id="digi-step2-1" class="digi-step" style="display: none;">
               <h2>Hvor mange ladeudtag har foreningen brug for?</h2>
                  <label><input type="radio" name="outlets" value="upTo10"> Op til 10 ladeudtag</label><br>
                  <label><input type="radio" name="outlets" value="moreThan10"> Mere end 10 ladeudtag</label>
<br>
                  <nav id="digi-buttons">
                  <button type="button" id="digi-tilbageKnap1" onclick="digiPreviousStepMobil()"><span class="material-symbols-outlined"> arrow_back_ios </span> Tilbage</button>         
                  <button type="button" id="digi-næsteKnap1" onclick="digiNextStepMobil()">Næste</button>
                  </nav>
         </div>

SCRIPT

function digiNextStepMobil() {
            var digiCurrentStep = document.querySelector('.digi-step:not([style*="display: none"])');
            var digiNextStep = digiCurrentStep.nextElementSibling;

            if (digiCurrentStep.id === "digi-step1-1") {
                var digiPlacement = document.querySelector('input[name="placement"]:checked').value;
                if (digiPlacement === "residentParking" || digiPlacement === "parkingGarage") {
                    document.getElementById("digi-step2-1").style.display = "none";
                    document.getElementById("digi-step3-1").style.display = "none";
                    digiNextStep = document.getElementById("digi-step4-1");
                }
            }

            if (digiCurrentStep.id === "digi-step3.1") {
                var digiHomes = document.querySelector('input[name="homes"]:checked').value;
                if (digiHomes === "moreThan40") {
                    digiShowResultMobil();
                    return;
                }
            }

            if (digiNextStep) {
                digiShowStep(digiNextStep);
            }
        }

I tried giving the ID’s differnet names in terms of perhaps dots and (-) not being allowed, but this was not the case.