<div class="panel panel-default">
            <div class="panel-body parent-additional-fields">

              <div class="row p-10">
                <div class="col-lg-10">
                  <label>Additional Fields</label>
                </div>
                <div class="col-lg-2">
                  <a href="#" id="add-additional-fields">
                    <i class="fa fa-plus"></i>
                  </a>&nbsp;&nbsp;&nbsp;
                  <a href="#" id="remove-additional-fields">
                    <i class="fa fa-times"></i>
                  </a>
                </div>
              </div>

              <div class="panel panel-default panel-grey additional-fields-group">
                <div class="panel-body">
                  <div class="row p-10">
                    <div class="col-lg-4">
                      <label>Field Name</label>
                    </div>
                    <div class="col-lg-8">
                      <input type="text" name="multiple[0][field_name]" class="form-control">
                    </div>
                  </div>
                  <div class="row p-10">
                    <div class="col-lg-4">
                      <label>Field Type</label>
                    </div>
                    <div class="col-lg-8">
                      <input type="text" name="multiple[0][field_type]" class="form-control">
                    </div>
                  </div>
                  <div class="row p-10">
                    <div class="col-lg-12">
                      <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#additional_field_opt_1[0]" class="option1" role="tab" data-toggle="tab">Option 1</a></li>
                        <li><a href="#additional_field_opt_2[0]" class="option2" role="tab" data-toggle="tab">Option 2</a></li>
                      </ul>

                      <!-- Tab panes -->
                      <div class="tab-content">
                        <div class="tab-pane fade in active tab_option1" id="additional_field_opt_1[0]">
                          <div class="well well-no-margin-bot well-white">
                            <div class="row p-10">
                              <div class="col-lg-4">
                                <label for="multiple[0][option_1][tag_name]">Tag Name</label>
                              </div>
                              <div class="col-lg-8">
                                <input name="multiple[0][option_1][tag_name]" type="text" class="form-control">
                              </div>
                            </div>
                            <div class="row p-10">
                              <div class="col-lg-4">
                                <label for="multiple[0][option_1][attribute]">Attribute</label>
                              </div>
                              <div class="col-lg-8">
                                <input name="multiple[0][option_1][attribute]" type="text" class="form-control">
                              </div>
                            </div>
                            <div class="row p-10">
                              <div class="col-lg-4">
                                <label for="multiple[0][option_1][value]">Value</label>
                              </div>
                              <div class="col-lg-8">
                                <input name="multiple[0][option_1][value]" type="text" class="form-control">
                              </div>
                            </div>
                            <div class="row p-10">
                              <div class="col-lg-4">
                                <label for="multiple[0][option_1][index]">Index</label>
                              </div>
                              <div class="col-lg-8">
                                <input name="multiple[0][option_1][index]" type="text" class="form-control">
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="tab-pane fade tab_option2" id="additional_field_opt_2[0]">
                          <div class="well">
                            <div class="row p-10">
                              <div class="col-lg-4">
                                <label for="multiple[0][option_2][tag_name]">Tag Name</label>
                              </div>
                              <div class="col-lg-8">
                                <input name="multiple[0][option_2][tag_name]" type="text" class="form-control">
                              </div>
                            </div>
                            <div class="row p-10">
                              <div class="col-lg-4">
                                <label for="multiple[0][option_2][index]">Index</label>
                              </div>
                              <div class="col-lg-8">
                                <input name="multiple[0][option_2][index]" type="text" class="form-control">
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>

$(document).on('click', '#add-additional-fields', function()
{
    var id         = parseInt($(this).closest('.parent-additional-fields').find('.additional-fields-group').length + 1);
    var index      = parseInt(id - 1);
    var parent_row = $(this).closest('.parent-additional-fields');
    var new_field  = $('.additional-fields-group').last().clone();

    var field_name          = 'multiple['+ index + '][field_name]';
    var field_type          = 'multiple['+ index + '][field_type]';
    var option_1_anchor     = 'additional_field_opt_1['+ index +']';
    var option_2_anchor     = 'additional_field_opt_2['+ index +']';
    var option_1_id         = 'additional_field_opt_1['+ index +']';
    var option_2_id         = 'additional_field_opt_2['+ index +']';
    var option_1_tagname    = 'multiple['+ index +'][option_1][tag_name]';
    var option_1_attribute  = 'multiple['+ index +'][option_1][attribute]';
    var option_1_value      = 'multiple['+ index +'][option_1][value]';
    var option_1_index      = 'multiple['+ index +'][option_1][index]';
    var option_2_tagname    = 'multiple['+ index +'][option_2][attribute]';
    var option_2_index      = 'multiple['+ index +'][option_2][index]';

    new_field.find('.option1').each(function(){
        var name = $(this);
        name.attr('href', '#'+option_1_anchor);
    });

    new_field.find('.option2').each(function(){
        var name = $(this);
        name.attr('href', '#'+option_2_anchor);
    });

    new_field.find('.tab_option1').each(function(){
        var name = $(this);
        name.attr('id', option_1_id);
    });

    new_field.find('.tab_option2').each(function(){
        var name = $(this);
        name.attr('id', option_2_id);
    });

    // new_field.find()

    $('.parent-additional-fields').append(new_field);
});

//remove additional fields
$(document).on('click', '#remove-additional-fields', function()
{
    if($(this).closest('.parent-additional-fields').find('.additional-fields-group').length == 1)
    {
        alert("You cannot remove the last form!");
        return false;
    }
    $(this).closest('.parent-additional-fields').find('.additional-fields-group').last().remove();
});