button only works occasionally using AJAX - html

Question

Below there's the function I use in my JavaScript file. It works sometimes when I clicked the button, but sometimes it doesn't.
How can I fix this issue?
function getEditForm(id) {
console.log("masuk editform")
$.ajax({
url: `${baseUrl}/todos/${id}`,
method: "GET",
headers: {
access_token: localStorage.getItem("access_token")
}
})
.done(todos => {
editPage()
$("#edit-title").val(`${todos.title}`)
$("#edit-description").val(`${todos.description}`)
$("#edit-due-date").val(`${(todos.due_date)}`)
$("#edit-todo-button").on("click", (e) => {
e.preventDefault()
editTodo(id)
})
})
.fail((xhr, text) => {
swal("Oops!", xhr.responseJSON.error[0], "error")
console.log(xhr.responseJSON.error[0])
})
}
Below the code inside document ready, it should be jus like that, right?
$("#btn-edit").on("click", (e) => {
e.preventDefault()
getEditForm(id)
})
below the html code, using append method to make m app dynamic:
$("#card-content").append(`
<div class="col-sm-6" id="todo-${el.id}">
<div class="card mt-3 mx-1 shadow" style="width:auto">
<div class="card-body">
<h5 class="card-title">${el.title}</h5>
<h6 class="card-subtitle mb-2 text-muted">${el.description}</h6>
<p class="card-text">Due date: ${el.due_date}</p>
<span>
<button type="button" class="btn btn-secondary btn-block d-inline mt-2" id="btn-status-${el.id}" style="width:auto;" onclick="updateStatus(${el.id})"><i class="bi bi-x-square"></i> Not Done</button>
<button type="button" class="btn btn-warning btn-block d-inline" id="btn-edit-${el.id}" style="width:auto;"><i class="bi bi-pencil" onclick="getEditForm(${el.id})"></i> Update</button>
<button type="button" class="btn btn-danger btn-block d-inline" id="btn-delete-${el.id}" style="width:auto;"><i class="bi bi-trash" onclick="deleteTodo(${el.id})"></i> Delete</button>
</span>
</div>
</div>
</div>
`)

Answer 1

See here you have an onclick function inside your fontawesome icon(i) tag so the getEditForm() function will be called only when you click on icon not on button part,
also the id you have given in button tag is dynamic
id="btn-edit-${el.id}"
so I think the below code will not work
$("#btn-edit").on("click", (e) => {
e.preventDefault()
getEditForm(id)
})
Workaround is just include onclick event on button tag instead of icon tag and pass id as a parameter to it