Javascript 从accordion面板中提交文本字符串

我正在动态显示手风琴，在手风琴的每个“可折叠面板”中，当有人单击每个面板的“+添加更多命令”按钮时，我尝试为每个面板动态生成文本框。我正在使用下面的自定义JQuery脚本动态创建文本输入

翡翠：

#accordion.panel-group
each item in session.intents
  .panel.panel-default
    .panel-heading
      h4.panel-title
        a(data-toggle='collapse', data-parent='#accordion', href='#collapse' + item) #{item}
    div(id="collapse#{item}").panel-collapse.collapse
      .panel-body
        .col-lg-6
          .my-form
            form(role='form', method='post')
              .text-box
                .form-group.input-group
                  span.input-group-addon
                    i.glyphicon.glyphicon-comment
                  input#box1.form-control(type='text', name='boxes[]', placeholder='Give a sample command..')
                  a.input-group-btn
                    button.remove-box.btn.btn-primary(type='button')
                      i.glyphicon.glyphicon-trash

              .add-box(href='#') 
                button.btn.btn-primary(type='button')
                  i.glyphicon.glyphicon-plus
                  |           Add more commands
              p
                button.btn.btn-primary(type='button')
                  i.glyphicon.glyphicon-save
                  |           Save commands

jQuery(document).ready(function($){
  $('.my-form .add-box').click(function(){
      var n = $('.text-box').length + 1;
      var box_html = $('<div class="text-box"><div class="form-group input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-comment"></i></span><input type="text" class="form-control" placeholder="Give an app name.." name="boxes[]" id="box1"><a class="input-group-btn"><button class="remove-box btn btn-primary" type="button"><i class="glyphicon glyphicon-trash"></i></button></a></div></div>');
      box_html.hide();
      if (n > 1) {
          $('.my-form .text-box:last').after(box_html);
      } else {
          $('.my-form').append(box_html);
      }
      box_html.fadeIn('slow');
      return false;
  });
  $('.my-form').on('click', '.remove-box', function(){
      $(this).parent().parent().css( 'background-color', '#FF6C6C' );
      $(this).parent().parent().fadeOut("slow", function() {
          $(this).remove();
          $('.box-number').each(function(index){
              $(this).text( index + 1 );
          });
      });
      return false;
  });
  $('.my-form').on('click', '.remove-box-out', function(){
      $(this).parent().css( 'background-color', '#FF6C6C' );
      $(this).parent().fadeOut("slow", function() {
          $(this).parent().remove();
          $('.box-number').each(function(index){
              $(this).text( index + 1 );
          });
      });
      return false;
  });

JQUERY:

#accordion.panel-group
each item in session.intents
  .panel.panel-default
    .panel-heading
      h4.panel-title
        a(data-toggle='collapse', data-parent='#accordion', href='#collapse' + item) #{item}
    div(id="collapse#{item}").panel-collapse.collapse
      .panel-body
        .col-lg-6
          .my-form
            form(role='form', method='post')
              .text-box
                .form-group.input-group
                  span.input-group-addon
                    i.glyphicon.glyphicon-comment
                  input#box1.form-control(type='text', name='boxes[]', placeholder='Give a sample command..')
                  a.input-group-btn
                    button.remove-box.btn.btn-primary(type='button')
                      i.glyphicon.glyphicon-trash

              .add-box(href='#') 
                button.btn.btn-primary(type='button')
                  i.glyphicon.glyphicon-plus
                  |           Add more commands
              p
                button.btn.btn-primary(type='button')
                  i.glyphicon.glyphicon-save
                  |           Save commands

jQuery(document).ready(function($){
  $('.my-form .add-box').click(function(){
      var n = $('.text-box').length + 1;
      var box_html = $('<div class="text-box"><div class="form-group input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-comment"></i></span><input type="text" class="form-control" placeholder="Give an app name.." name="boxes[]" id="box1"><a class="input-group-btn"><button class="remove-box btn btn-primary" type="button"><i class="glyphicon glyphicon-trash"></i></button></a></div></div>');
      box_html.hide();
      if (n > 1) {
          $('.my-form .text-box:last').after(box_html);
      } else {
          $('.my-form').append(box_html);
      }
      box_html.fadeIn('slow');
      return false;
  });
  $('.my-form').on('click', '.remove-box', function(){
      $(this).parent().parent().css( 'background-color', '#FF6C6C' );
      $(this).parent().parent().fadeOut("slow", function() {
          $(this).remove();
          $('.box-number').each(function(index){
              $(this).text( index + 1 );
          });
      });
      return false;
  });
  $('.my-form').on('click', '.remove-box-out', function(){
      $(this).parent().css( 'background-color', '#FF6C6C' );
      $(this).parent().fadeOut("slow", function() {
          $(this).parent().remove();
          $('.box-number').each(function(index){
              $(this).text( index + 1 );
          });
      });
      return false;
  });

jQuery（文档）.ready（函数（$）{
$（'.my form.add box'）。单击（函数（）{
var n=$（'.text box'）。长度+1；
var box_html=$（''）；
box_html.hide（）；
如果（n>1）{
$（'.my-form.text-box:last'）。在（box\u html）之后；
}否则{
$（'.my form'）.append（box_html）；
}
box_html.fadeIn（'slow'）；
返回false；
});
$（'.my form'）。在（'单击'，'.remove box'，函数（）上{
$（this.parent（）.parent（）.css（'background color'，'#FF6C6C'）；
$（this.parent（）.parent（）.fadeOut（“slow”，function（））{
$（this.remove（）；
$（'.box number'）。每个（函数（索引）{
$（此）.text（索引+1）；
});
});
返回false；
});
$（'.my form'）。在（'单击'，'删除框'，函数（）上）{
$（this.parent（）.css（'background color'，'#FF6C6C'）；
$（this.parent（）.fadeOut（“slow”，function（））{
$（this.parent（）.remove（）；
$（'.box number'）。每个（函数（索引）{
$（此）.text（索引+1）；
});
});
返回false；
});

}))

当我单击下面的“添加更多命令”按钮时，它会添加更多文本输入框，但仅在第二个面板下（而不是第一个面板下）

问题:

如何向两个面板中的每个面板添加动态文本框

我如何向模型传递一些信息，告诉它文本值来自哪个面板（Panel1或Panel2）

---

$（'.my form.text box:last'）

总是选择最后一个文本框，因此如果在同一个my form中有两个面板，则只会选择最后一个面板中的最后一个。因此，将您的选择器更改为将新文本框添加到文本框父项的末尾，而不是最后一个文本框的后面。

添加一个隐藏字段

面板id

，在面板按钮

上找到最靠近单击
$（此）
的字段，然后将其传递到
弹出窗口
。谢谢！但是，我如何更改JS和相应的代码来实现这一点呢？另外，当我提交表单时，我如何才能知道它来自哪个面板/我从未使用过jade，因此除非你能显示jade模板创建的html，否则我真的帮不了你。