tilføje input felt via button

Det er dumt at tilføje flere felter via en løkke på den måde, fordi det gør at de eksisterende bliver slettet og tegnet igen hver gang der opdateres, så allerede indtastet data forsvinder. I stedet bør du bare tilføje de nye felter når der trykkes på knappen.

Samme tip har jeg givet i en tidligere tråd her: https://www.computerworld.dk/eksperten/spm/1028064

Og det relevante kodeeksempel er her: http://snip.kilolima.dk/#/APrrOFq

Tak for din kommentar, har ændret lidt i mit script, men er ikke kommet til den endelige løsning :-(
Jeg får et input felt ved første klik :-)
men ved andet klik er det kun placeholder der skifter fra 1 til 2, så ved jeg at counteren virker.
Min kode:
<div id = "java"></div>           
<button id="clickme">Tilføj ingrediens</button>   

<script>
var button = document.getElementById("clickme");
  count = 0;
    button.onclick = function()
    {
        count += 1;
       
    var formgroup ='<div class="form-group">';
    var label='<label class="col-md-4 control-label">Indtast ingrediensen</label>';
        var md8='<div class="col-md-8 inputGroupContainer">';
        var inputgroup = '<div class="input-group">';
        var addon = '<span class="input-group-addon"></span>';
        var input = '<input name="ingrediens" placeholder="' + count +'" class="form-
        control"  type="text">';
        var div = '</div></div></div>';
   
        var res = formgroup + label + md8 +  inputgroup + addon + input + div;
       
    document.getElementById("java").innerHTML = res;
    }
</script>
Har også prøvet at lege med den snip du linkede til.
Her får jeg et inputfelt frem hver gang jeg klikker, og det følger css stylen :-)
Men der skal komme tre forskellige input felter frem, dem får jeg frem, men så følger det ikke css stylen ordentligt :-/
Hvordan får jeg det opbygget korrekt, har forsøgt mig med appendchild()
Den korrekte opbygning af et enkelt inputfelt ser sådan herud:
<div class="form-group">
                <label class="col-md-4 control-label">Indtast ingrediens</label> 
                <div class="col-md-8 inputGroupContainer">
                  <div class="input-group">
                    <span class="input-group-addon"></span>
                    <input Name="ingrediens[<?php echo $i; ?>]" placeholder="Ingrediens" class="form-control"  type="text">
                  </div>
                </div>
            </div>

scriptet er her:
<section id="download" class="section feature">
        <div class="container">
            <div class="col-lg-12 text-center" id="test">
                <fieldset>
                    <legend>Opret opsktift</legend>
                        <div class="form-group">
                <label class="col-md-4 control-label">Vælg kategori</label> 
                <div class="col-md-8 inputGroupContainer">
                  <div class="input-group">
                    <span class="input-group-addon"></span>
                    <select name="kategori" placeholder="Kategori" class="form-control"  type="text" required autofocus>
                        <?php    while ($row = $stmt_row->fetch()) { ?>
                            <option value="<?php echo $row['id']; ?>"><?php echo $row['type']; ?></option>
                        <?php } ?>
                    </select>
                  </div>
                </div>
            </div>
       
</div>               
<button id="clickme">Tilfør ingrediens</button>   

<script>
var button = document.getElementById("clickme"),
  count = 0;
    button.onclick = function()
    {
        count += 1;
       
        var my_container = document.getElementById("test");
 
        var classdiv = document.createElement("div");
        classdiv.setAttribute("class", "form-group");
               
        var label_ing = document.createElement("label");
        label_ing.setAttribute("class", "col-md-4 control-label");
        label_ing.innerHTML="Indtast ingrediens";
       
        var label_antal = document.createElement("label");
        label_antal.setAttribute("class", "col-md-4 control-label");
        label_antal.innerHTML="Indtast antal";
       
        var label_maal = document.createElement("label");
        label_maal.setAttribute("class", "col-md-4 control-label");
        label_maal.innerHTML="Indtast maal";
 
        var colmd = document.createElement("div");
        colmd.setAttribute("class", "col-md-8 inputGroupContainer");
       
        var inputgroup = document.createElement("div");
        inputgroup.setAttribute("class", "input-group");
 
        var span = document.createElement("span");
        span.classList.add("input-group-addon");
       
        /*
        //hidden
        var hidden = document.createElement('input');
        hidden.setAttribute("name", "id" + [count]);
        hidden.setAttribute("type", "hidden");
        hidden.setAttribute("value", count);
        my_container.appendChild(hidden);
        */
 
        //ingrediens
        var ingrediens = document.createElement('input');
        ingrediens.setAttribute("name", "opskrift" + [count]);
        ingrediens.setAttribute("type", "text");
        ingrediens.setAttribute("placeholder", "Navnet på ingrediensen" + count);
        ingrediens.setAttribute("class", "form-control");
       
        inputgroup.appendChild(span);
        inputgroup.appendChild(ingrediens);
        colmd.appendChild(inputgroup);
        classdiv.appendChild(label_ing);
        classdiv.appendChild(colmd);
       
        my_container.appendChild(classdiv); //udskriver til test
       
        // Antal
        var antal = document.createElement('input');
        antal.setAttribute("type", "text");
        antal.setAttribute("placeholder", "Antal");
        antal.setAttribute("class", "form-control");
        antal.setAttribute("name", "antal" + [count]);
       
        inputgroup.appendChild(span);
        inputgroup.appendChild(antal);
        colmd.appendChild(inputgroup);
        classdiv.appendChild(label_antal);
        classdiv.appendChild(colmd);
       
        my_container.appendChild(classdiv); //udskriver til test
       
        //maal
        var maal = document.createElement('input');
        maal.setAttribute("name", "opskrift" + [count]);
        maal.setAttribute("type", "text");
        maal.setAttribute("placeholder", "maal" + count);
        maal.setAttribute("class", "form-control");
       
        inputgroup.appendChild(span);
        inputgroup.appendChild(maal);
        colmd.appendChild(inputgroup);
        classdiv.appendChild(label_maal);
        classdiv.appendChild(colmd);
       
        my_container.appendChild(classdiv);//udskriver til test
    };
</script>   
        </div>
    </section>

Til sådan nogle komplicerede strukturer der skal ændres og duplikeres, vil jeg stærkt anbefale at lære og benytte et front-end template framework som f.eks. Angular, Vue, Knockout, osv. Jeg foretrækker selv Vue, men det er hvad man selv synes - de kan alle gøre den slags meget simplere og mere overskueligt end manuelt.

F.eks. kan du gøre hvad du ønsker med så lidt kode som dette:
http://snip.kilolima.dk/#/sedGqar
Flere felter tilføjes helt som du normalt ville i HTML.

Det er dog kun for at gøre det lettere at overskue. Det du har forsøgt der kan også virke ganske glimrende, og du er meget tæt på at have den i det du viser. Så vidt jeg kan se er det eneste problem at dine labels er et niveau for langt ude, og bør lægge sig til de enkelte inputs - korrekt?