Рекурсивное создание EventListeners на основе пользовательского ввода?

Question

Итак, я пытаюсь создать программу, очень похожую на простой текстовый документ, где она получает пользовательский ввод через форму, после отправки -> новый div + новую форму и ввод с другим идентификатором, созданным в новой строке.

Но тогда мне нужно создать новый Evenlistener для этой строки, и, как бесконечный Eventlistener внутри EventListener, каждый раз, когда пользователь отправляет свой ввод. Я знаю, что это не способ сделать это, но я понятия не имею, как его реализовать, я не могу поместить его в цикл, так как это не работает, а идентификатор внутри GetElementById не обновляется и тольковызывается один раз, даже после того, как я увеличу его .. в чем решение?

соответствующий код ниже:

document.getElementById("uiform"+progress).addEventListener('submit', function(event) {
 event.preventDefault();
 new_ui(""); // creates new div with new id and new form and input with new id.
 progress++;
       document.getElementById("uiform"+progress).addEventListener('submit', function(event)
     {
       event.preventDefault();
       new_ui(""); // creates new div with new id and new form and input with new id.
       progress++;
             document.getElementById("uiform"+progress).addEventListener('submit', function(event)
           {
             event.preventDefault();
             new_ui(""); // creates new div with new id and new form and input with new id.
             progress++;
           });
     });
});