Jquery: Stopping after 1st click

Question

I am trying to implement edit functionality for a HTML element.

Right now my html-pug code is as below

div
    label(for="todo" id="todo" + index class="ind-todo-list") test1

        button(type="submit" id="todo" + index class="btn" onclick="editTodo()" ) Edit
        button(type="submit" id="todo" + index class="btn" onclick="deleteTodo()" ) Delete

Jquery is as below

$(document).ready(function() {
    $(".ind-todo-list").on("click" , function(){ 
        var todoid = $(this).attr("id"); 
        var newInput = document.createElement("input");
        newInput.type="text";
        newInput.name="todo";  

        $("#" + todoid).html(newInput);
      });
  });

But everytime I am clicking at the test1 my page reloading again even after input field added.

What I am trying to achieve is - when I click at test1 , I will have input box opened, where I can edit the test1 and save changes. But I am stuck here.

Thank you.

Edit 1

I have added event.preventDefault() but still experiencing same same

$(document).ready(function() {

                    $(".ind-todo-list").on("click" , function(event){
                        event.preventDefault(); 
                        var todoid = $(this).attr("id"); 
                        console.log("Todoid " + todoid);
                        console.log($("#" + todoid).html());
                        var newInput = document.createElement("input");
                        newInput.type="text";
                        newInput.name="todo";  
                        //newInput.id=todoid;  
                        //$("#" + todoid).html("<input type='text' name='todo' id='"+todoid+"'>");
                        $("#" + todoid).html(newInput);

                    });

Edit 2 - ID fix

div
    label(for="todo" id="todo" + index class="ind-todo-list") #{todo.todo}

        button(type="submit" id="todoedit" + index class="btn" ) Edit
        button(type="submit" id="tododeleteq" + index class="btn" ) Delete

Answer 1

$(".ind-todo-list").on("click" , function(e){ 
//add an event to prevent default action on the element       
 e.preventDefault();

      });
  });