Как применить изменения только к новым полям после события «добавить новое»?

Question

У меня есть фрагмент кода, который автоматически заполняет новые поля определенным числом. Однако это автоматически также обновляет значения перед редактированием пользователем. Мне нужно настроить этот код так, чтобы только новые добавленные строки включали желаемый предварительно заполненный номер без редактирования каких-либо других.

document.addEventListener("DOMContentLoaded", function(event) {
  copyValueToRepeat();

  var sourceField = document.getElementById( 'field_jimvh' );
  sourceField.addEventListener( "change", function(event) {
  copyValueToRepeat();
  });

});

jQuery(document).on('frmAfterAddRow', copyValueToRepeat );

function copyValueToRepeat(){
  var sourceField = document.getElementById( 'field_jimvh' );
  var repeatFields = document.querySelectorAll( '.frm_field_216_container input');

 for ( var i = 0, len=repeatFields.length; i<len; i++ ) {
        repeatFields[i].value = sourceField.value;
    }   

}

Я считаю, что проблема в конце цикла for, но я не знаю, как его точно настроить. Я предполагаю, что эта проблема будет тривиальной, но мои навыки программирования являются базовыми.

Спасибо за вашу помощь.

Answer 1

Эта строка document.querySelectorAll( '.frm_field_216_container input') выбирает все поля.Возможно, вы захотите добавить дополнительный класс CSS в новые поля, такие как 'new_input_field', а затем измените ваш селектор запросов на: document.querySelectorAll( '.frm_field_216_container .new_input_field')