Responsive Multi-step-form with SCSS and vanilla JS

wow, i appreciate your guts for making it in vanilla js. The info field validations seem great (something that i don't really care in my solution).

I think your solution got a serious problem on total summary step. I found you calculate it twice tho.

in here

            planOptions.forEach((plan) => {
                let costOfPlans = plan.querySelectorAll('.cost');
                costOfPlans.forEach(cost => {
                    if (cost.classList.contains('yearly-cost') && plan.classList.contains('active')) {
                        totalPlanCost *= 10; // this set the value of the total cost 
                        ShowPlanCost(plan);
                    }
                })
            });

///

            planOptions.forEach((plan) => {
                let costOfPlans = plan.querySelectorAll('.cost');
                costOfPlans.forEach(cost => {
                    if (cost.classList.contains('monthly-cost') && plan.classList.contains('active')) {
                        totalPlanCost /= 10;
                        ShowPlanCost(plan);
                    }
                })
            });

and here

function getTotal(changeValue) {
    let localTotal = totalPlanCost;

    if(changeValue) {
        if(!switchOptions.checked) { totalCount.innerText = '+$' + localTotal / 10 + '/mo';  } // yearly access
        else { totalCount.innerText = '+$' + localTotal * 10 + '/yr'; } // monthly access
    } else {
        if(!switchOptions.checked) { totalCount.innerText = '+$' + localTotal + '/mo';  } // yearly access
        else { totalCount.innerText = '+$' + localTotal * 10 + '/yr'; } // monthly access
    }
}

Be careful when you attemp to imperatively mutating state. Try to using pure function (or maybe using object that has getter and setter if you OOP person) for calculation stuff. If you are not careful enough, you may lead it into a bug.

and one more thing, 'console.log's. try remove them before you push your code into production.