How to change the form to javascript?

Question

JavaScript

Hi everybody.
I have a popup, it has a select with the ability to replenish funds, 4 selection options,
and plus there is a form at the bottom. I got confused here, I decided to try to make a select on scss / js It turned out, but now I don’t understand how can I show the correct form of filling in the data when choosing a certain value?
structure in popup looks like this

<div class="select">
            <div class="header">
              <span class="current" id="currentSelect">вариант оплаты1</span>
            </div>
            <div class="select__body">
              <div class="select__body-item">вариант оплаты1</div>
              <div class="select__body-item">вариант оплаты2</div>
              <div class="select__body-item">вариант оплаты3</div>
              <div class="select__body-item">вариант оплаты4</div>
            </div>
          </div>
<form class="form1" action="#" id="pay1">
     <input class="form1__tel-input" type="text" />
            <input class="form__subbmit" type="submit" value="Вывести"/>
          </form>
<form class="form2" action="#" id="pay2">
     <input class="form2__tel-input" type="text" />
            <input class="form__subbmit" type="submit" value="Вывести"/>
          </form>

Several questions
1. Is select too confused (in principle, I can redo it, add the formstyler plugin)? can there be problems when submitting the form (with the select which is now)?
2. How to do it in javascript so that when you select, for example, "payment option2", the second form (form2) appears and the first one disappears?
Thanks for the help !!!!

Answer 1

The simplest option : When loading the page, if the select has an empty value, hide all forms (display: none;/visibility:hidden;), if there are no empty values ​​in the select, then the first option is selected in the select by default, the form corresponding to the option is visible , the rest are hidden. Each option in select has a value equal to the name of the form, when choosing an option, hide all forms, show the one selected by name.
I dashed off on my knee using jquery, you can write in vanilla, but I'm too lazy, I think the idea is already clear)

A more complicated option : When choosing an option, load the corresponding form with ajax into the prepared container.