Help, I have a function that changes the index, I would like the fields to be added to a new div and the last div deleted.
const addActivity = (parent, arr, name) => {
    const el = $(parent).find(`input[name^="${arr}"]`).last();
    const attr = el.attr('name');
    const index = +attr.match(/(?<=\[).+?(?=\])/)[0];
    const newEl = el.clone();
    newEl.attr('name', `${arr}[${index + 1}][${name}]`);
    $(parent).append(newEl);
}
    $('#addField').click(() => {
    addActivity('.first', 'activity','first');
    addActivity('.first', 'term','last');
    addActivity('.last', 'activity1','first1');
    addActivity('.last', 'term1','last1');
    
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class ="first">
    <input type="text" id="parent" value="div" name="activity[0][first]">
    <input type="text" id="name" value="activity" name="term[0][last]">
</div>
<div class ="last">
    <input type="text" id="parent1" value="div1" name="activity1[0][first1]">
    <input type="text" id="name1" value="activity1" name="term1[0][last1]">
</div>
<button id="addField">Add</button> 
    