添加动态输入，从动态动态生成输入获取值

Question

我使用JavaScript创建了一个带有AddChapitre函数的动态表单，我希望从输入文本<input type="text" class="form-control" id="grandTitreNbr1">中获取数字值。并创造了＃34;数字值＆＃34;当我使用addChapitre函数AddFeild()点击<button id="b1" class="btn btn-primary" onclick="addFields()">add titres</button>按钮时输入。

问题是当我点击addChapitre时，我隐藏了Chapitre表格。 这是JsFiddle：http://jsfiddle.net/javagose/6veqe55v/1/

此图片将显示问题：

function addChapitre() {
    var newdiv = document.createElement('div');

    var addChapitre =
        '<div class="panel panel-success"> <div class="panel-heading"> <h2 class="panel-title">' +
        '<a data-toggle="collapse" data-target="#collapse" href="#collapse" class="collapsed">chapitre : ' + j +
        ' </a></h2></div><div class="panel-body" id="Chapitre' + j + '">';

    newdiv.innerHTML += addChapitre;

    addChapitre1 =
        '<div class="panel-collapse" id="collapse' + j + '" >' +
        '<form class="form-horizontal"><div class="form-group">' +
        '<label for ="ChapTitre' + j + '">Titre du chapitre</label>' +
        '<input type="text" class="form-control" id="ChapTitre' + j +
        '" placeholder=" titre du chapitre ' + j + '"></div></form></div>';
    newdiv.innerHTML += addChapitre1;

    addChapitre2 =
        '<div class="panel panel-success" id="grandTitres' + j + '">' +
        '<div class="panel-heading"><h2 class="panel-title">' +
        '<a data-toggle="collapse" data-target="#collapseTitre" ' +
        'href="#collapseTitre" class="collapsed"> Grands titres des chapitre: ' + j + '</a></h2></div>';
    newdiv.innerHTML += addChapitre2;

    addChapitre2 =
        '<div class="panel-body"><div class="panel-collapse" id="collapseTitre" >' +
        '<form class="form-horizontal"><div class="form-group" id ="grandTitres1">' +
        '<label for ="grandTitreNbr1"> GRAND TITRE</label>' +
        '<input type="text " class="form-control" id="grandTitreNbr' + j + '">' +
        '<button id="b1" class="btn btn-primary" onclick="addFields()">add titres</button>' +
        '<div id="grandTitresDiv' + j + '">' +
        '</div></div> </form></div></div> </div></div></div>';
    newdiv.innerHTML += addChapitre2;

    document.getElementById('conteneur').appendChild(newdiv);
    j++;
}

function addFields() {
    var number = document.getElementById("grandTitreNbr" + j + "").value;
    var container = document.getElementById("grandTitresDiv" + j + "");

    for (i = 0; i < number; i++) {
        // Append a node with a random text
        var newdiv = document.createElement('div');
        var grandTitreTxt =
            '<input type="text" class="form-control" id="grandTitreTxt' + j +
            '" name="grandTitreTxt' + j + '"></div>';
        newdiv.innerHTML += grandTitreTxt;

        var grandTitreUpload =
            '<div class="checkbox"><label><input type="checkbox"> Pdf </label></div>' +
            ' <input type="file" name="fichier" id="fichier"' + j + ' accept="pdf" />';
        newdiv.innerHTML += grandTitreUpload;


        var grandTitreUpload =
            '<div class="checkbox"><label><input type="checkbox">video </label>' +
            '</div> <input type="file" name="fichier" id="fichier"' + j +
            ' accept="video" />';
        newdiv.innerHTML += grandTitreUpload;

        container.appendChild(newdiv);
        // Append a line break
        container.appendChild(document.createElement("br"));
    }
}