Отправка текстовой строки из панели аккордеона

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. Как передать некоторую информацию модели, рассказывая ей, из какой панели выводится текстовое значение (Panel1 или Panel2)?

Answer 1

$('.my-form .text-box:last') всегда выбирает самый последний текстовый поле, поэтому, если у вас есть две панели в одной и той же форме, будет выбрана только последняя из последней панели. Итак, измените ваш селектор на то, что добавляет новое текстовое поле в конец родителя текстовых полей, а не после последнего текстового поля.