Counting dynamically created HTML elements

I am trying to count HTML elements that have been dynamically created/deleted for sorting later on.

I have tried many different code solutions during my research, but not having much success. Maybe another set of eyes can see something obvious that I'm missing, though I cleaned up the JS code to remove the messes that I tried.

This is an order form that will ultimately have a JSON output for merging into a databse. The section that I'm having difficulty with is in the Codepen link. The HTML starts with a static first line with the Add Row option. The overall line count will include the static HTML first line. I have a wrapper that is counting the <tr> elements of a <table> with class name = 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 = ` <td><input id="Qty_${i}" class="tr-scnt" name="Qty_${i}" maxlength="15" size="15" type="text" required="required" /></td> <td><input id=Kinds_${i}" class="tr-scnt" name="Kind_${i}" maxlength="15" size="15" type="text" required="required" /></td> <td><input id=Type_${i}" class="tr-scnt" name="Type_${i}" maxlength="15" size="15" type="text" required="required" /></td> <td><span style="color: rgb(153, 0, 0);"><span style="color: black;"> <textarea id=Item_${i}" class="tr-scnt" name="Item_${i}" type="textarea" cols=70" rows="2" onkeyup="AutoGrowTextArea(this)" onchange="this.value=RWS(this.value)" required="required"></textarea></td> <td><input width="12%" id="ReqDateTime_${i}" class="tr-scnt" name="ReqDateTime_${i}" type="text" title="For Logistics Section Only" size="26" maxlength="26" /></td> <td><input width="12%" id="EstDateItem_${i}" class="tr-scnt" name="EstDateTime_${i}" type="text" title="For Logistics Section Only" size="26" maxlength="26" /></td> <td><input width="7%" id="Cost_${i}" class="tr-scnt" name="Cost_${i}" type="text" title="For Logistics Section Only" size="10" maxlength="10" /></td> <td><button class="remScnt">Del Row</button></td>`; 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(); } } }); });

I'm just looking for assistance to get the actual line count to a new element that can be seen in console.log.

Caveat: This is an offline browser based form that is not able to use any online library like jQuery, etc.

Codepen