Добавить данные предыдущей строки в динамически сгенерированную строку для хранения данных

Question

Я копирую эту часть кода для динамического добавления строк, и она работает очень хорошо:

<script>
//define template
var template = $('#sections .section:first').clone();
//define counter
var sectionsCount = 1;
//add new section
$('body').on('click', '.addsection', 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 CAUSES JqueryUI Datepicker to bug, also you shouldn't use numerical only IDs
        //this.id = newId;
    }).end()
    //inject new section
    .appendTo('#sections');
    //initialize datePicker on last name=date[] element in HTML DOM
    $("input[name='date[]']").last().datepicker();
    return false;
});
//init original datePicker in HTML DOM
$("input[name='date[]']").last().datepicker();
//remove section
$('#sections').on('click', '.remove', function() {
    //fade out section
    $(this).parent().fadeOut(300, function(){
        //remove parent element (main section)
        $(this).parent().parent().empty();
        return false;
    });
    return false;
});

</script>

Можете ли вы изменить этот скрипт, чтобы добавить данные предыдущей строки в динамически генерируемую строку, теперь сценарий создает только новую строку спустое поле, как на этом скриншоте:

Можете ли вы помочь мне решить эту проблему?

Я использую Codeigniter Framework.

Большое спасибо, Риккардо

Answer 1

Вы копируете / клонируете переменную с именем template, которая определяется в верхней части как первый раздел. Вы можете присвоить ему значение во время добавления раздела, и это может быть последний раздел.

let sectionsCount = 1;
$('body').on('click', '.addsection', function() {
   const template = $('#sections .section:last').clone();
   sectionsCount++;

   //loop through each input
   template.find('input').each(function(){
     //set id to store the updated section number
     const newId = this.id + sectionsCount;
     //update for label
     $(this).prev().attr('for', newId);
     //update id - THIS CAUSES JqueryUI Datepicker to bug, also you shouldn't use numerical only IDs
     //this.id = newId;
   });

   //inject new section
   template.appendTo('#sections');

   //initialize datePicker on last name=date[] element in HTML DOM
   $("input[name='date[]']").last().datepicker(); 
});

PS - я не проверял его.