How to reset display none?

Question

JavaScript

The question is still relevant, if anyone can help me understand what the problem is, something can’t be solved
Hello everyone, I’m doing a quiz on swiper js, there are 4 points, when you select one of the points, the display block turns on and the next swipe will be with this information, but if I press back and select another option, then that one also becomes a
display block and on the next swipe they are in 2 two blocks under each other how to remove this?

thanks for the help .

<div class="popup popup-form-two">
        <div class="container__step">
            <form name="form">
                <div class="swiper-container swiper-container-sub">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
           
                            <!-- form 1 -->
                            <div class="form" name="form">

                                <div class="container__step__header">
                                    <h3>расчет стоимости</h3>
                                    <div id="close" class="close close__sub"></div>

                                </div>
                                <div class="container__step__main">
                                    <div class="container__step__flex">
                                        <div>
                                            <h4>Куда вы планируете устанавливать окна</h4>
                                        </div>
                                        <div class="media__with__sub">
                                            <label> 
                                            <img src="img/stepone/1.jpg" alt="stepone">
                                            <div class="input__form__flex">
                                            <input id="allow_one" class="check__one" name="where" type="radio" data-form="formOne" > 
                                         <span>Квартира</span>
                                        </div>
                                    </label>
                                        </div>
                                        <div class="media__with__sub">
                                            <label><img src="img/stepone/2.jpg" alt="stepone">
                                            <div class="input__form__flex">
                                                <input id="allow" name="where" type="radio" data-form="formTwo">
                                                <span>Частный дом</span>
                                            </div></label>
                                        </div>
                                        <div class="media__with__sub">
                                            <label><img src="img/stepone/3.jpg" alt="stepone">
                                            <div class="input__form__flex">
                                                <input id="allow_two" name="where" type="radio" data-form="formThree" ><span>Дача</span>
                                            </div></label>
                                        </div>
                                        <div>
                                            <label>
                                            <img src="img/stepone/4.svg" alt="stepone">
                                        <div class="input__form__flex">
                                            <input name="whereSub"  type="radio" ><span>Остекление балкона</span>
                                        </div>
                                        </label>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="container__step__flex__sub">
                                            <div class="container__step__title">
                                                <p>После опроса вы сможете<br> выбрать один из подарков:</p>
                                            </div>
                                            <div><img src="img/123.jpg" alt=""></div>
                                            <!-- <div><img src="img/stepsub/2.jpg" alt=""></div>
                                        <div><img src="img/stepsub/3.jpg" alt=""></div> -->
                                            <div class="container__step__bacground">
                                                <p>
                                                    Шаг 1 из 7
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="navigation navigation__one " id="nav__left">
                                    <div class="swiper-button-pre none__swip__pre"></div>
                                    <div class="swiper-button-nex" id="swiper__button">
                                        <input class="btn__sub" type="submit" id="submit" disabled value="Дальше &#8594;">
                                        <!-- <p>Дальше &#8594;</p> -->
                                        </input>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">

это формы которые вызываются смотря какой пункт выбран в первой форме
                            <!-- form 2-1  -->
                            <div id="formOne" class="form form__two__one" name="form">
                                
                            <!-- form 2-2  -->
                            <div id="formTwo" class="form form__two__two" name="form">

                               
                            <!-- form 2-3  -->
                            <div id="formThree" class="form form__two__three" name="form">

var inputName = document.querySelectorAll('[name="where"]');

if (inputName) {
    inputName.forEach(function(el) {
        el.addEventListener('change', changeSlide);

    });
}
function changeSlide(evt) {
    var dataForm = evt.target.dataset.form;
    var form = document.querySelector("#" + dataForm);
    form.style.display = 'block';

}

Answer 1

Create a class with a property display: noneand enable/disable it for the required elements.