i have a form where user should make new inputs

now user can make new input BUT once only

index.html

<form id="MyForm">
            <input type="text" class="Line" id="Line0">
</form>

index.js

MyForm.addEventListener('submit', {
    handleEvent(event) {//make new line
        event.preventDefault();
        let myForm = document.getElementById("MyForm");
        myForm.insertAdjacentHTML("beforeend", "<input type='text' class='Line'id='line1'>")
    }
})

i have tried :

function new_line(index, event) {
    //change all indexes before this object
    let FormArray = Array.from(MyForm)
    MyForm.insertAdjacentHTML("beforeend", "<input type='text' class='Line' id='Line" + FormArray.length + " onsubmit='return new_line(" + FormArray.length + ")'>")
    event.preventDefault();
}

and

function new_line(index) {
    //change all indexes before this object
    let FormArray = Array.from(MyForm)
    MyForm.insertAdjacentHTML("beforeend", "<input type='text' class='Line' id='Line" + FormArray.length + " onsubmit='return new_line(" + FormArray.length + ")'>")
    return false;
}

but both of this functions update the page before i understand do they work or not