Подсчет динамически создаваемых HTML-элементов ⇐ Javascript

[Anonymous]

Я пытаюсь подсчитать HTML-элементы, которые были динамически созданы/удалены для последующей сортировки.
Во время своего исследования я пробовал много разных кодовых решений, но без особого успеха. Возможно, другая пара глаз увидит что-то очевидное, чего мне не хватает, хотя я почистил JS-код, чтобы устранить беспорядок, который я пытался.
Это форма заказа, которая в конечном итоге будет иметь вывод JSON для слияния с базой данных. Раздел, с которым у меня возникли трудности, находится в ссылке Codepen. HTML начинается со статической первой строки с опцией «Добавить строку». Общее количество строк будет включать первую строку статического HTML. У меня есть оболочка, которая подсчитывает элементы в с именем класса = input-wrap.

Код: Выделить всё

function resetIndexes() {
let j = 1;

// Select all .input-wrap elements
document.querySelectorAll('.input-wrap').forEach(inputWrap => {
if (j > 1) {
// Find all input elements inside this wrapper
inputWrap.querySelectorAll('input, textarea').forEach(input => {
const baseName = input.name.split('_')[0];
input.name = `${baseName}_${j}`;
input.placeholder = ``;
});
}
j++;
});
}

document.addEventListener('DOMContentLoaded', () => {
const scntDiv = document.querySelector('#tr-scents');
let i;

document.querySelector('#addScnt').addEventListener('click', e => {
e.preventDefault();

// Count all wrappers instead of inputs
i = document.querySelectorAll('#tr-scents .input-wrap').length + 1;

const wrapper = document.createElement('tr');
wrapper.className = 'input-wrap';
wrapper.innerHTML = `







Del Row`;

scntDiv.appendChild(wrapper);
i++;
});

// Event delegation for remove links
document.querySelector('#tr-scents').addEventListener('click', e => {
if (e.target.classList.contains('remScnt')) {
e.preventDefault();

if (i > 2) {
e.target.closest('tr').remove();
resetIndexes();
}
}
});
});

Мне просто нужна помощь, чтобы получить фактическое количество строк для нового элемента, который можно увидеть в console.log.
Предупреждение: это автономная форма на основе браузера, которая не может использовать какие-либо онлайн-библиотеки, такие как jQuery и т. д.
Codepen>

Подробнее здесь: https://stackoverflow.com/questions/798 ... l-elements