Bootstrtap 3 Modal Window with 2 tabs and dynamic forms

I have a Bootstrap webpage with a Modal Window which has two tabs. There are two dinamic forms in the modal window. I am using this code for cloning fields in each of the form and I have two scripts for each of the tab but it not work for me. I can see fields from one form, cloning fields but when I click the second tab forms don't changing and I can see fields from the first tab only. What to do with it?

Script First Form

$(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>

For second form I was changed ID names of fields, names of ID div in HTML and in the script (for example template_add_form to template_rab_form and entries to rab) and I get the first form on both tabs only.

And second question: how to add new names with personal ID to cloned fields?

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