JavaScript htcontents ne s'affiche pas correctement dans HTML

Question

J'ai un formulaire HTML, l'utilisateur devrait être en mesure d'ajouter d'autres zones de texte pour une question donnée. Mais avant toute entrée de texte, il y a une sélection de menu déroulant, les zones de texte deviennent visibles après chaque sélection (dépend également de la sélection, le nombre de zones de texte visible Changement). Voici le 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;
               }

Mais lorsque un champ supplémentaire est ajouté, au lieu de;

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

Ceci est créé (l'emplacement de la double citation est faux)

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

Et à cause de ce problème, Field2-3-4 n'est pas visible.

Que faire?

Voici la fonction d'affichage

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,

Je veux avoir un menu déroulant;

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

Si l'utilisateur sélectionne la sélection 1;

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

Si l'utilisateur sélectionne la sélection 1;

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

Lorsque l'utilisateur termine le remplissage des boîtes, il pourrait vouloir en ajouter plus;

addReference();

Là encore, il voit,

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

Et ainsi de suite ... est-ce clair maintenant?