Adding new dynamic form after button click

let typ_zakladatela = document.getElementById('typ_zakladatela');
let fyz_osoba_form = document.getElementById('fyz_osoba_form');
let prav_osoba_form = document.getElementById('prav_osoba_form');
let hotovo_btn = document.getElementById('hotovo');
let addRows = document.getElementById('1');
let addNewPerson = document.getElementById('addNewPerson');
let forms = document.querySelectorAll('.form');
prav_osoba_form.style.display = "none";

// changing form depening on selected item
typ_zakladatela.addEventListener('change', () => {
    let selected_value = typ_zakladatela.value;

    if(selected_value === "Fyzická osoba"){
        fyz_osoba_form.style.display = "block";
        prav_osoba_form.style.display = "none";
    }else {
        prav_osoba_form.style.display = "block";
        fyz_osoba_form.style.display = "none";
    }
});

// add person
hotovo_btn.addEventListener('click', () => {
    let selected_value = typ_zakladatela.value;
    let fyz_meno = document.getElementById('fyz_meno').value;
    let fyz_priezvisko = document.getElementById('fyz_priezvisko').value;
    let prav_meno = document.getElementById('meno').value;
    let prav_priezvisko = document.getElementById('priezvisko').value;

    if(selected_value === "Fyzická osoba"){
        addRows.textContent = fyz_meno + " " + fyz_priezvisko;
    }else {
        addRows.textContent = prav_meno + " " + prav_priezvisko;
    }
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<form action="#" class="form">
                    <div class="form-group">
                        <label for="typ_zakladatela">TYP ZAKLADATEĽA *</label>
                        <select class="form-control" name="typ_zakladatela" id="typ_zakladatela" autofocus>
                            <option value="Fyzická osoba">Fyzická osoba</option>
                            <option value="Právnicka osoba">Právnicka osoba</option>
                        </select>
                    </div>
                    <hr>

                    <!-- form pre fyzicku osobu -->
                    <div id="fyz_osoba_form">
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-6">
                                    <label for="pohlavie">POHLAVIE *</label>
                                    <select class="form-control" name="pohlavie" id="pohlavie" required>
                                        <option value="Muž">Muž</option>
                                        <option value="Žena">Žena</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-3">
                                    <label for="titul">TITUL PRED MENOM</label>
                                    <input type="text" name="titul" id="titul" class="form-control" required placeholder="Názov ulice / námestia">
                                </div>
                                <div class="col-sm-3">
                                    <label for="fyz_meno">MENO *</label>
                                    <div class="row">
                                        <input type="text" name="fyz_meno" id="fyz_meno" class="form-control" required>
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <label for="fyz_priezvisko">PRIEZVISKO *</label>
                                    <div class="row">
                                        <input type="text" name="fyz_priezvisko" id="fyz_priezvisko" class="form-control" required>
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <label for="titul_za">TITUL ZA MENOM</label>
                                    <div class="row">
                                        <input type="text" name="titul_za" id="titul_za" class="form-control">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-6">
                                    <label for="ico">ULICA/NÁMESTIE *</label>
                                    <input type="text" name="ico" id="ico" class="form-control" required placeholder="Názov ulice / námestia">
                                </div>
                                <div class="col-sm-6">
                                    <label for="supisne_cislo">SÚPISNÉ ČÍSLO / ORIENTAČNÉ ČÍSLO *</label>
                                    <div class="row">
                                        <input type="text" name="supisne_cislo" id="supisne_cislo" class="form-control col-sm-3" required>
                                        <input type="text" name="orientacne_cislo" id="orientacne_cislo" class="form-control col-sm-3" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-8">
                                    <label for="obec">OBEC *</label>
                                    <input type="text" name="obec" id="obec" class="form-control" required>
                                </div>
                                <div class="col-sm-4">
                                    <label for="psc">PSČ *</label>
                                    <input type="number" name="psc" id="psc" class="form-control" required>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-6">
                                    <label for="fyz_stat">ŠTÁT *</label>
                                    <select class="form-control" name="fyz_stat" id="fyz_stat" required>
                                        <option value="1">1</option>
                                    </select>
                                </div>
                                <div class="col-sm-3">
                                    <label for="d_narodenia_fyz">DÁTUM NARODENIA *</label>
                                    <input type="date" name="d_narodenia_fyz" id="d_narodenia_fyz" class="form-control" required>
                                </div>
                                <div class="col-sm-3">
                                    <label for="rodne_cislo">RODNÉ ČÍSLO *</label>
                                    <div class="row">
                                        <input type="text" name="rodne_cislo_fyz" id="rodne_cislo_fyz" class="form-control col-sm-3" required>
                                        <input type="text" name="rodne_cislo2_fyz" id="rodne_cislo2_fyz" class="form-control col-sm-3" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-6">
                                    <label for="doklad_totoz">TYP DOKLADU TOTOŽNOSTI *</label>
                                    <select class="form-control" name="doklad_totoz" id="doklad_totoz" required>
                                        <option value="Občiansky preukaz">Občiansky preukaz</option>
                                        <option value="Pas">Pas</option>
                                        <option value="Iný doklad">Iný doklad</option>
                                    </select>
                                </div>
                                <div class="col-sm-6">
                                    <label for="cislo_dokladu">ČÍSLO DOKLADU TOTOŽNOSTI *</label>
                                    <input type="text" name="cislo_dokladu" id="cislo_dokladu" class="form-control" required>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-4">
                                    <label for="vyska_vkladu">VÝŠKA VKLADU *</label>
                                    <input type="number" name="vyska_vkladu" id="vyska_vkladu" class="form-control" required placeholder="€">
                                </div>
                                <div class="col-sm-4">
                                    <label for="podiel_v_spolocnosti">PODIEL V SPOLOČNOSTI *</label>
                                    <input type="number" name="podiel_v_spolocnosti" id="podiel_v_spolocnosti" class="form-control" required placeholder="%">
                                </div>
                                <div class="col-sm-4">
                                    <label for="rozsah_splatenia_vkladu">ROZSAH SPLATENIA VKLADU *</label>
                                    <input type="number" name="rozsah_splatenia_vkladu" id="rozsah_splatenia_vkladu" class="form-control" required placeholder="€">
                                </div>
                            </div>
                        </div>
                        <h3 id="reg_trestov" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Údaje pre výpis z registra trestov &darr;</h3>
                        <div class="collapse" id="collapseExample">
                            <p>Aby mohol za vás živnostenský úrad online vyžiadať výpis z registra trestov konateľa, vyžaduje nasledovné údaje:</p>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <label for="miesto_narodenia">MIESTO NARODENIA *</label>
                                        <input type="text" name="miesto_narodenia" id="miesto_narodenia" class="form-control" required placeholder="Napr. Bratislava">
                                    </div>
                                    <div class="col-sm-6">
                                        <label for="statna_prislusnost">ŠTÁTNA PRÍSLUŠNOSŤ *</label>
                                        <input type="text" name="statna_prislusnost" id="statna_prislusnost" class="form-control" required placeholder="Napr. Slovenska">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <label for="rodne_priezvisko">RODNÉ PRIEZVISKO *</label>
                                        <input type="text" name="rodne_priezvisko" id="rodne_priezvisko" class="form-control" required>
                                    </div>
                                    <div class="col-sm-6">
                                        <label for="predchadzajuce_priezvisko">PREDCHÁDZAJÚCE PRIEZVISKO</label>
                                        <input type="text" name="predchadzajuce_priezvisko" id="predchadzajuce_priezvisko" class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <label for="meno_otca">MENO OTCA *</label>
                                        <input type="text" name="meno_otca" id="meno_otca" class="form-control" required>
                                    </div>
                                    <div class="col-sm-6">
                                        <label for="priezvisko_otca">PRIEZVISKO OTCA *</label>
                                        <input type="text" name="priezvisko_otca" id="priezvisko_otca" class="form-control" required>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-sm-4">
                                        <label for="meno_matky">MENO MATKY *</label>
                                        <input type="text" name="meno_matky" id="meno_matky" class="form-control" required>
                                    </div>
                                    <div class="col-sm-4">
                                        <label for="priezvisko_matky">PRIEZVISKO MATKY *</label>
                                        <input type="text" name="priezvisko_matky" id="priezvisko_matky" class="form-control" required>
                                    </div>
                                    <div class="col-sm-4">
                                        <label for="rodne_priezv_matky">RODNÉ PRIEZVISKO MATKY *</label>
                                        <input type="text" name="rodne_priezv_matky" id="rodne_priezv_matky" class="form-control" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn btn-success" id="addNewPerson">Pridat Osobu</button>
                    </div>


                    <!-- form pre pravnicku osobu -->
                    <div id="prav_osoba_form">
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-6">
                                    <label for="ico">IČO</label>
                                    <input type="text" name="ico" id="ico" class="form-control">
                                </div>
                                <div class="col-sm-6">
                                    <label for="obchodne_meno">OBCHODNÉ MENO *</label>
                                    <input type="text" name="obchodne_meno" id="obchodne_meno" class="form-control">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-6">
                                    <label for="ico">ULICA/NÁMESTIE *</label>
                                    <input type="text" name="ico" id="ico" class="form-control" required placeholder="Názov ulice / námestia">
                                </div>
                                <div class="col-sm-6">
                                    <label for="supisne_cislo">SÚPISNÉ ČÍSLO / ORIENTAČNÉ ČÍSLO *</label>
                                    <div class="row">
                                        <input type="text" name="supisne_cislo" id="supisne_cislo" class="form-control col-sm-3" required>
                                        <input type="text" name="orientacne_cislo" id="orientacne_cislo" class="form-control col-sm-3" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-8">
                                    <label for="obec">OBEC *</label>
                                    <input type="text" name="obec" id="obec" class="form-control" required>
                                </div>
                                <div class="col-sm-4">
                                    <label for="psc">PSČ *</label>
                                    <input type="number" name="psc" id="psc" class="form-control" required>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="stat">ŠTÁT *</label>
                            <select class="form-control" name="stat" id="stat" required>
                                <option value="1">1</option>
                            </select>
                        </div>
                        <h3>Zastúpenie osobou (konateľ)</h3>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-6">
                                    <label for="meno">Meno *</label>
                                    <input type="text" name="meno" id="meno" class="form-control" required>
                                </div>
                                <div class="col-sm-6">
                                    <label for="priezvisko">PRIEZVISKO *</label>
                                    <input type="text" name="priezvisko" id="priezvisko" class="form-control" required>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-6">
                                    <label for="d_narodenia">DÁTUM NARODENIA *</label>
                                    <input type="date" name="d_narodenia" id="d_narodenia" class="form-control" required>
                                </div>
                                <div class="col-sm-6">
                                    <label for="rodne_cislo">RODNÉ ČÍSLO *</label>
                                    <div class="row">
                                        <input type="text" name="rodne_cislo" id="rodne_cislo" class="form-control col-sm-3" required>
                                        <input type="text" name="rodnce_cislo2" id="rodnce_cislo2" class="form-control col-sm-3" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-4">
                                    <label for="vyska_vkladu">VÝŠKA VKLADU *</label>
                                    <input type="number" name="vyska_vkladu" id="vyska_vkladu" class="form-control" required placeholder="€">
                                </div>
                                <div class="col-sm-4">
                                    <label for="podiel_v_spolocnosti">PODIEL V SPOLOČNOSTI *</label>
                                    <input type="number" name="podiel_v_spolocnosti" id="podiel_v_spolocnosti" class="form-control" required placeholder="%">
                                </div>
                                <div class="col-sm-4">
                                    <label for="rozsah_splatenia_vkladu">ROZSAH SPLATENIA VKLADU *</label>
                                    <input type="number" name="rozsah_splatenia_vkladu" id="rozsah_splatenia_vkladu" class="form-control" required placeholder="€">
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn btn-success">Pridat Osobu</button>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-info" data-dismiss="modal">Zrusiť</button>
                        <button type="submit" id="hotovo" class="btn btn-secondary" data-dismiss="modal">Hotovo</button>
                    </div>
                </form>
        
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>

Hey guys I have one form including let’s say data about person like name, address and so on. Then I have a button “add new person”. I’m just confused because after clicking on that button the same form should be created so user can fill data about second person but this might be problem on the backend to distinguish this two forms and also name and id will be the same. Is there any way how I can create some dynamic form so I can know which person is which ??? Thanks for any help

Answer

You can use a counter that determines how many people are there, and increment it, as well as changing class / id / name attributes

const people = 1;
document.querySelector('button').addEventListener('click', (e) => {
people += 1;
document.querySelector(/*insert parent name here*/).insertAdjacentHTML('beforeend', `<input id="name-input--${people}"><input id="address-input--${people}">
});