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>