從手風琴面板提交文本字符串

Question

我在手風琴中動態顯示手風琴並在每個「可摺疊面板」內部，當有人點擊「+添加更多命令」按鈕時，我試圖爲每個面板動態生成文本框每個小組。我使用的是自定義的jQuery腳本下方創建動態文本輸入..

JADE：

#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：

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; 
    }); 

}）;

當我點擊下面的「添加更多命令」按鈕時，它會添加更多的文本輸入框，但只在第二個面板下面（而不是在第一個面板下面）。

問題：

1. 我如何添加動態文本框到兩個小組的？
2. 如何將一些信息傳遞給模型，告訴它文本值來自哪個面板（面板1或面板2）？

Answer 1

$('.my-form .text-box:last')總是選擇的最後文本，所以如果你有兩個面板在同我的形式，只有最後一個小組的最後一個會被選中。所以更改您的選擇器，將新的文本框添加到文本框的父項的末尾而不是在最後一個文本框之後。