Bootstrtap 3模态窗口，带有2个选项卡和动态表单

Question

我有一个带有模态窗口的Bootstrap网页，它有两个标签。模态窗口中有两种动态形式。我使用this code来克隆每个表单中的字段，每个选项卡都有两个脚本，但它对我不起作用。我可以从一个表单中查看字段，克隆字段但是当我点击第二个表单时，表单不会改变，我只能看到第一个选项卡中的字段。怎么办呢？

脚本优先表格

$(function() {
//console.log($('#template_add_form'));
var clone = function(tmpl) {
        return $((tmpl.clone()).html())
    },
    $template = $('#template_add_form'),
    formArray = [ clone($template) ], // init array with first row
    $formEntries = $('#entries');

$(document).on('click', '.btn-add', function() {
    //console.log('clicked');
    formArray.push(clone($template));
    updateForm();
    // set focus to adding row = last element in array
    $(formArray).last()[0]
        .find('input')
        .first()
        .focus();
});

// remove not working yet

$(document).on('click', '.btn-remove', function(evt) {
    var id;
    // iterate over formArray to find the currently clicked row
    $.each(formArray, function(index, row) {
        //console.log(index, row.has(evt.currentTarget).length);
        if ( row.has(evt.currentTarget).length == 1 ) {
            //console.log(row.has(evt.currentTarget));
            id = index; // click target in current row
            return false; // exit each loop
        }
    });

    //console.log('clicked', id);
    formArray.splice(id, 1);
    updateForm();
});

var updateForm = function() {
    // redraw form --> problem values are cleared!!
    //console.log(formArray);
    var lastIndex = formArray.length - 1,
        name; // stores current name of input

    $formEntries.empty(); // clear entries from DOM becaue we re-create them
    $.each(formArray, function(index, $input) {
        //console.log(index, $input);
        // update names of inputs and add index
        //console.log('inputs', $input.find('input'));
        $.each($input.find('input'), function(inputIndex, input) {
            name = $(input).attr('name').replace(/\d+/g, ''); // remove ids
            $(input).attr('name', name + index);
        });

        if (index < lastIndex) {
            // not last element --> change button to minus
            //console.log($input.find('.btn-add'));
            $input.find('.btn-add')
                 .removeClass('btn-add').addClass('btn-remove')
                 .removeClass('btn-success').addClass('btn-danger')
                 .html('<span class="glyphicon glyphicon-minus"></span>');
        }

        $formEntries.append($input);
    });
};

updateForm(); // first init. of form

$('form#loanform').submit(function(evt) { 
    evt.preventDefault();
    var fields = $(this).serializeArray();
    $.each(fields, function(index, field) {
        //console.log(field.name);
        //if ( field.name == 'extra' ) {
        //    console.log('extra', field.name, field.value);
        // }
        if ( field.name.contains('material') ) 
        {   // field.name contains balance
            console.log('material', field.name, field.value);
            // now you can do your calculation
        }
        if ( field.name.contains('cena') )
        {   // field.name contains balance
            console.log('cena', field.name, field.value);
            // now you can do your calculation
        }
        if ( field.name.contains('kol') )
        {   // field.name contains balance
            console.log('kol', field.name, field.value);
            // now you can do your calculation
        }
    });
});

}）;

HTML First Form

<!-- script id="template_add_form" type="text/template" -->
  <div class="entry input-group triple-input">
            <select class="form-control" name="material" >
                           <option>...</option>
            </select>     
            <select class="form-control" name="cena" >
                           <option>..</option>

            </select>

      <input type="text" placeholder="..." name="kol" class="form-control" />

        <span class="input-group-btn">
          <button class="btn btn-success btn-add" type="button" name="button" id="cloneButton"><span class="glyphicon glyphicon-plus"></span></button>
        </span>
     </div>
  <!--//script-->
<form method="post" id="loanform" role="form" autocomplete="off">
    <div id="entries"></div>

对于第二种形式，我更改了字段的ID名称，HTML和脚本中ID div的名称（例如 template_add_form 到 template_rab_form 和条目< / em>到 rab ）我只在两个标签上获得第一个表单。

第二个问题：如何在克隆字段中添加带有个人ID的新名称？

if ( field.name.contains('name') )
            {   
                console.log('name', field.name, field.value);
                // now you can do your calculation
            }