JavascriptとJqueryを使用して異なるIDを持つ複数のテキストボックスを作成できません

Question

javascriptとjqueryを使用して複数のテキストフィールドを動的に作成できません。私は以下のコードを説明しています。

ここ

<div class="col-md-3"> 
    <div class="form-group"> 
     <label for="ques">No of questions</label> 
     <input name="no_of_question" id="ques" class="form-control" placeholder="no of question" type="text"> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-md-8"> 
     <div class="form-group"> 
     <label>Questions</label> 
     <input type="button" style="line-height:13px; margin-right:2px;" class="btn btn-success btn-sm" name="plus" id="plus" value="+" onClick="addQuestionField();"> 
     <input type="button" style="line-height:13px; margin-right:2px;" class="btn btn-danger btn-sm" name="minus" id="minus" value="-" onClick="deleteQuestionField();"> 
     </div> 
     <div class="text-left" id="intro-add" style="display:none"> 
     <input type="button" name="" class="btn btn-sm btn-info" value="Add"> 
     </div> 
    </div> 

    </div> 
    <div id="container"> 
    <div class="form-group" style="margin-top:5px;display:block" id="introBox0" > 
     <div> 
     <input type="text" style="width: 77.5%;float:left; margin-bottom:5px; margin-right:5px;" class="form-control inptbox0" id="scaleans00" name="labelname" placeholder="Answer" value=""> 
     <input type="button" style="line-height:13px; margin-right:2px; margin-top:5px; float:left;" class="btn btn-danger btn-sm" name="labelminus" id="labelminus" value="-"> 
     <div class="text-left" id="intro-add" style="display:block"> 
      <input type="button" name="" class="btn btn-sm btn-info" value="Add" onclick="addMore(0,0)"> 
     </div> 
     </div> 
    </div> 
    <hr> 
    </div> 

ユーザーは、複数の質問セクションを作成し、各質問セクションのユーザーがaddボタンを使用して複数のフィールドを作成しなければならないとminusボタンを使用して削除されます。各質問フィールドは一意でなければなりません。セクション1の入力フィールドが3つあり、idsはこのようになります。scaleans00,scaleans01,scaleans02...、セクション2ではscaleans10,scaleans11,scaleans12...などになります。私は以下のjavascriptコードを説明しています。

<script> 
    function addQuestionField() { 
     var get = $("#ques").val(); 
     for (var i = 1; i < get; i++) { 
     $('#container').append('<div class="form-group dyn" style="margin-top:5px;display:block" id="introBox'+i+'"><div><input type="text" style="width: 77.5%;float:left; margin-bottom:5px; margin-right:5px;" class="form-control inptbox'+i+'" id="scaleans'+i+'0" name="labelname" placeholder="Answer" value=""><input type="button" style="line-height:13px; margin-right:2px; margin-top:5px; float:left;" class="btn btn-danger btn-sm" name="labelminus" id="labelminus" value="-"><div class="text-left" id="intro-add" style="display:block"><input type="button" name="" class="btn btn-sm btn-info" value="Add" onclick="addMore('+i+',0)"></div></div></div><hr>'); 
     } 
    } 

    function deleteQuestionField() { 
     var textareas = $('#container .dyn'); 
     if (textareas.length !== 0) { 
     textareas.last().remove(); 
     $('#ques').val(textareas.length - 1); 
     } 
    } 
     function addMore(parent,child){ 
      var mainDiv='#introBox'+parent; 
      $(mainDiv).append('<div><input type="text" style="width: 77.5%;float:left; margin-bottom:5px; margin-right:5px;" class="form-control inptbox'+parent+'" id="scaleans" name="labelname" placeholder="Answer" value="">'+'<input type="button" style="line-height:13px; margin-right:2px; margin-top:5px; float:left;" class="btn btn-danger btn-sm" name="labelminus" id="labelminus" value="-"></div>'); 
      repopulate(parent); 
     } 
     function repopulate(k){ 
      var mainId='.inptbox'+k; 
      var j=0; 
      $(mainId).each(function(i, e) { 
       if(i==0){ 
        $(this).attr('id', 'scaleans' + i+j); 
        $(this).next().attr('onClick', function(old, n) { 
         return 'removeThis(' + i + ','+j+')'; 
        }) 
        $(this).next().attr('id', function(old, n) { 
        return 'labelminus' + i+j; 
       }); 
       }else{ 
        $(this).attr('id', 'scaleans' + i+(j+1)); 
        $(this).next().attr('onClick', function(old, n) { 
         return 'removeThis(' + i + ','+(j+1)+')'; 
        }) 
        $(this).next().attr('id', function(old, n) { 
        return 'labelminus' + i+(j+1); 
       }); 
       } 
      }) 
     } 
     function removeThis(r,t) { 
      $("#scaleans" + r+t).remove(); 
      $("#labelminus" + r+t).remove(); 
      repopulate(); 
    } 
    </script> 

ここで私は自分の要件に従って作成することはできません。 Here is my full code。私を助けてください。

Answer 1

私は）あなたがあなたの方法addQuestionFiled（でPlunker

function addQuestionField() { 
    var get = $("#ques").val(); 
     for (var i = 1; i < get; i++) { 

に入れている現在のコードで何が起こっているかをあなたに説明され、あなたがしている場合、GET変数に取得した値は、truthyではありません

数

質問のテキストフィールドに任意の値を入力することではありません。したがって、htmlは追加されません

質問の数を2として入力してから、「var get」の値が2になり、「var i」というコンテナdivにhtmlを追加し続けると、 'var get'より小さい