Как дублировать форму со значением

Question

У меня есть форма, где пользователь может добавлять, редактировать и дублировать раздел. Пользователь может нажать на кнопку, и новый раздел добавляется. Мне удается добавить и удалить раздел, но проблема, с которой я сейчас сталкиваюсь, заключается в том, что я не знаю, как дублировать раздел вместе со значением. Я действительно ценю твою помощь. Ниже приведен код HTML и JS.

   <!-- HTML -->
   <div id="sections">
        <div class="section">
            <div class="card">
                <div class="header">
                    <h2>
                        Strong Back
                    </h2>
                </div>
                <div class="body">
                    <form class="form-horizontal">
                        <div class="row clearfix">
                            <div class="col-lg-2 col-md-2 col-sm-4 col-xs-5 form-control-label">
                                <label for="email_address_2">Plate Material</label>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
                                <div class="form-group form-float">
                                    <div class="form-line">
                                        <option>1</option>
                                        <option>2</option>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-2 col-md-2 col-sm-4 col-xs-5 form-control-label">
                                <label>Bolt Material</label>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
                                <div class="form-group form-float">
                                    <div class="form-line">
                                        <select class="form-control"
                                                name="boltMaterial[]" type="text">
                                              <option>1</option>
                                              <option>2</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <div class="row clearfix">
                            <div class="col-12 text-right">
                                <button class="btn btn-primary m-1 addStrongBack" type="button">
                                    Duplicate
                                </button>
                                <button class="btn btn-danger m-1 removeStrongBack" type="button">
                                    Remove
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

<!--JAVASCRIPT-->

//define template
var template = $('#sections .section:first').clone();

//define counter
var sectionsCount = 1;

 //add new section
 $('body').on('click', '.addStrongBack', function () {

//increment
sectionsCount++;

//loop through each input
var section = template.clone().find(':input').each(function () {

    //set id to store the updated section number
    var newId = this.id + sectionsCount;

    //update for label
    $(this).prev().attr('for', newId);

    //update id
    this.id = newId;

}).end()

    //inject new section
    .appendTo('#sections');
return false;
});


//remove section
$('#sections').on('click', '.removeStrongBack', function () {
//fade out section
$(this).parent().fadeOut(100, function () {
    //remove parent element (main section)
    $(this).parent().parent().parent().parent().parent().empty();
    return false;
});
return false;
});

Answer 1

Вы можете использовать метод clone(), чтобы скопировать все со значениями, рассмотрите фрагмент кода ниже для большего понимания

$(document).ready(function(){
  $("#txtInput").val("some value");
  $("#anotherdiv").append($("#form1").clone());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="form1">
  <input type="text" value="" id="txtInput"/>
</div>
<div id="anotherdiv">

</div>

Answer 2

Используйте клон для определенного раздела. Предполагая, что нам нужно клонировать раздел с индексом index :

var section = $('#sections .section').eq(index);
section.append(section.clone(0));