具有相关数组索引的动态元素的动态表单

Question

注意：javascript和PHP的新手

要求：

1. 用户可以选择添加多个表单和多个级别，如图所示。



1. 结构：



＆＃13;
＆＃13;
idnum = 0

next = 1;

dimandlevels = [{}];

$(document).on('click', '.addlevel', function() {

  clickedIdnum = $(this).data('idnum');
  //console.log(idnum+'\n');
  var newTextBoxDiv = $(document.createElement('div'))
    .attr("id", 'TextBoxDiv' + clickedIdnum + next);

  newTextBoxDiv.after().html('<input class="input form-control textboxclass" id="textbox' + next + '" name="dimdetail[' + idnum + '][2][' + next + ']" type="text" placeholder="Enter Level ' + (next + 1) + ' value ">');

  newTextBoxDiv.appendTo(".TextBoxesGroup" + idnum);
  next++;
});


$(document).on('click', '.removelevel', function() {

  if (next == 1) {
    alert("No more textbox to remove");
    return false;
  }

  next--;
  $("#TextBoxDiv" + next).remove();
});
＆＃13;
<h3><b>Create Texts</b></h3> <br>

<form class="form-horizontal" name="add_form" id="add_form">
  <fieldset>
    <form class="form-horizontal" role="form">
      <fieldset>
        <legend>Enter Dimension Details</legend>
        <form class="form-horizontal" role="form">
          <div class="controls" id="vignetteform">
            <div id="dimensionform0">
              <div class="well">
                <div class="row">
                  <label class="col-lg-3 control-label">Dimension Text:</label>
                  <div class="col-lg-9">
                    <div class="control-group">
                      <div class="controls">
                        <div>
                          <input class="form-control textboxclassdim" type="text" name="dimdetail[0][0]" />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <label class="col-lg-3 control-label">Dimension Description:</label>
                  <div class="col-lg-9">
                    <div class="control-group">
                      <div class="controls">
                        <div>
                          <input class="form-control textboxclass" type="text" name="dimdetail[0][1]" />

                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <label class="col-lg-3 control-label">Enter Level:</label>
                  <div class="col-lg-8 control-group levelgroup"><input type="hidden" name="count" value="1">
                    <div class="controls TextBoxesGroup0">
                      <div id="TextBoxDiv00">
                        <input class="form-control textboxclass" id="textbox" type="text" name="dimdetail[0][2][0]" placeholder="Enter Level 1 Value" />
                      </div>
                    </div>
                    <button class="btn btn-info addlevel" type="button">Add Level</button>
                    <button class="btn btn-info removelevel" type="button">Remove level</button>
                    <span id="error_message" class="text-danger"></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </form>
      </fieldset>
    </form>
    <div class="row">
      <div class="col-md-8">
        <button class="btn btn-info adddimension" type="button">Add Dimension</button>
        <button class="btn btn-info removedimension" type="button">Remove Dimension</button>
        <input type="button" name="submit" id="submit" class="btn btn-primary" value="Send" />
      </div>
    </div>

  </fieldset>
</form>

<script src="includes/js/addlevelform.js"></script>
<script src="includes/js/adddimensionform.js"></script>
＆＃13;
＆＃13;
＆＃13;
＆＃13;
＆＃13;
$(document).ready(function(){
    
    var next = 1;    
    
    $(".adddimension").click(function(){
          
        var newDimensionFormDiv = $(document.createElement('div'))
	     .attr("id",'dimensionform' + next);
         
        newDimensionFormDiv.after().html(            
           
            '<div class="well"><div class="row"><label class="col-lg-3 control-label">Dimension Text:</label><div class="col-lg-9"><div class="control-group"><div class="controls"><div>      <input class="form-control textboxclassdim" type="text" name="dimdetail['+ next +'][0]" /></div></div></div></div></div><div class="row"><label class="col-lg-3 control-label">Dimension Description:</label><div class="col-lg-9"><div class="control-group"><div class="controls"><div><input class="form-control textboxclass" type="text" name="dimdetail['+ next +'][1]" /></div></div></div></div></div><div class="row"><label class="col-lg-3 control-label">Enter Level:</label><div class="col-lg-8 control-group levelgroup"><input type="hidden" name="count" value="1"><div class="controls TextBoxesGroup'+ next +'" ><div id="TextBoxDiv'+ next +'0"><input class="form-control textboxclass" id="textbox'+ next +'" type="text" name="dimdetail['+ next +'][2][0]" placeholder="Enter Level '+ next +' Value" /></div></div><button data-idnum="'+idnum+'" class="btn btn-info addlevel" type="button">Add Level</button><button class="btn btn-info removelevel" type="button">Remove level</button><span id="error_message'+ next +'" class="text-danger"></span></div></div></div></div>'
        
        
        );
         
        newDimensionFormDiv.appendTo("#vignetteform");
        
        next++;
        idnum++;
        var jsonObj = {idnum:1};
        dimandlevels.data.push(idnum:1);
        
        console.log(dimandlevels);
        
    });
    
    
    $(".removedimension").click(function(){
      
    if(next==1){
          alert("No more dimension to remove");
          return false;
       }  
    
        next --;
        idnum--;
        $("#dimensionform" + next).remove();
            
    });
    
    
});
＆＃13;
＆＃13;
＆＃13;

问题：1。添加级别仅适用于第一个表单        2.数组索引应该是正确的

所以我需要一种方法，以便我可以使用适当的级别ID创建多个维度。

谢谢你，对不起我的错误代码!!!!我是编程新手：/