Изменить входные имена в дочерних узлах с помощью JavaScript

Question

Мне нужна помощь в расширении этого JavaScript (заимствовано из https://www.quirksmode.org/dom/domform.html):

var appCounter = 0;
function anotherApp() {
    appCounter = appCounter + 1;
var newAppField = document.getElementById("keyApp").cloneNode(true);
    newAppField.id = '';
    newAppField.style.display = 'block';
    var newApp = newAppField.childNodes;
        for (var i = 0; i < newApp.length; i++) {
        var theName = newApp[i].name
        if (theName) {
    newApp[i].name = theName + appCounter;
        }
    }
    var insertApp = document.getElementById('keyApp');
    insertApp.parentNode.insertBefore(newAppField, insertApp);

    document.getElementById('appCount').value = appCounter
}

Это прекрасно работает, когда элемент в моей форме:

<div id="keyApp" style="display:none">
    <input type="text" name="application" id="application">
    <input type="text" name="usage" id="usage">
<\div>

Но когда я добавляю divВокруг входных данных (причины стиля начальной загрузки) я теряю возможность обновлять имена входных данных:

<div id="keyApp" style="display:none">
    <div class="col-md-2">
        <input type="text" name="application" id="application">
    </div>
    <div class="col-md-2">
        <input type="text" name="usage" id="usage">
    </div>
<\div>

Как расширить скрипт для изменения имен входных данных в этих новых div?

Answer 1

Поскольку теперь есть еще один слой, вам нужно получить newApp[i].childNodes[0], чтобы получить фактические входные элементы.

newApp теперь содержит список элементов div со стилем col-md-2, и вам нужно поместить дочерние элементы в эти элементы div.