JavaScript HTContents non viene visualizzato correttamente in HTML

Question

Ho un modulo HTML, l'utente dovrebbe essere in grado di aggiungere altre caselle di testo per una determinata domanda. Ma prima di qualsiasi input di testo, è presente una selezione del menu a discesa, le caselle di testo diventano visibili dopo ogni selezione (dipende anche dalla modifica della selezione, del conteggio delle caselle di testo visibile). Ecco il JavaScript;

    var var1=1;
        function addAffiliation(){
                    var newArea = addNew();
                    var htcontents ="<input placeholder='categories..'  
class='input_box' type='textbox' name='categories[]' 
onchange='display(this, 'field2', 'field3', 'field4');'/>" 
                        + "<br/><br/>"; 
                    document.getElementById(newArea).innerHTML = htcontents;             
                }
        function addNew() {
                    var1=var1+1;       
                    var var2 = document.getElementById('area');
                    var newdiv = document.createElement('div');
                    var divIDName = 'Div #'+ var1;
                    newdiv.setAttribute('id',divIDName);
                    ni.appendChild(newdiv);
                    return divIDName;
               }

Ma quando viene aggiunto un campo extra, anziché;

<input placeholder="categories.."
    class="input_box" type="textbox" name="categories[]"
    onchange="display(this, 'field2', 'field3', 'field4');"/>

questo è creato (la posizione del doppio preventivo è sbagliato)

<input placeholder="categories.."  
        class="input_box' type="textbox" name="categories[]" 
        onchange="display(this, "field2', 'field3', 'field4');'/>

E a causa di questo problema, Field2-3-4 non è visibile ..

Cosa fare?

Ecco la funzione di visualizzazione

function display(obj,id1,id2,id3) {
    txt = obj.options[obj.selectedIndex].value;
    document.getElementById(id1).style.display = 'none';
    document.getElementById(id2).style.display = 'none';
    document.getElementById(id3).style.display = 'none';
    if ( txt.match(id1) ) {
        document.getElementById(id1).style.display = 'block';
    }
    if ( txt.match(id2) ) {
        document.getElementById(id2).style.display = 'block';
    }
    if ( txt.match(id3) ) {
        document.getElementById(id3).style.display = 'block';
    }
}

@Aram,

Voglio avere un menu a discesa;

<option name="first">selection 1</option>
<option name="second">selection 2</option>

Se l'utente seleziona la selezione 1;

field1:< input name="field1".....>
field2:< input name="field2".....>

Se l'utente seleziona la selezione 1;

field3:< input name="field3".....>
field4:< input name="field4".....>
field5:< input name="field5".....>

Quando l'utente finisce di riempire le caselle, potrebbe voler aggiungere altro;

addReference();

Poi di nuovo vede,

<option name="first">selection 1</option>
    <option name="second">selection 2</option>

E così via .. è chiaro adesso?