Creating ToDo list problem

1

I stuck on function for deleting an entry. Button delete only work for one entry in list.

Code:

<input id="inp1" placeholder="text...">

<button onclick="func1()">Note</button>

<div id="divGl">

</div>

<script>

    function func1() {

        i = 0;

        let inputValue = document.getElementById("inp1").value;

        let divGl = document.getElementById("divGl");

        list = document.createElement("ul");

        list.setAttribute("id", "list");

        line = document.createElement("li");

        line.setAttribute("id", "line");

        noteText = document.createElement("p");

        noteText.setAttribute("id", "noteText");

        noteText = document.createTextNode(inputValue);

        btnDel = document.createElement("button");

        btnDel.setAttribute("id", "btnDel" + i);

        btnDel.innerHTML = "delete";

        line.appendChild(noteText);

        line.appendChild(btnDel);

        list.appendChild(line);

        divGl.appendChild(list);

       

        document.getElementById("btnDel" + i).

            addEventListener("click", function (event) {

                funcDel(event.value);

            });

        i++;  

    }

    function funcDel(id) {

            let lista = list.line;

            for (const key in lista) {

                if (lista[key].id == id) {

                    

                    divGl.list.splice(key, 1);

                }

            }

           list.innerHTML = "";

            

        }

</script>
2

I copy my code in CodePen so everyone can see the problem and help me to solve it:

Problem is how to delete line in todo list, seems like event listener only work for first button