<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta charset="UTF-8">
<title>todo</title>
</head>
<body>
<div class="container"&pgt;
<h1 class="text">To Do App</h1>
<hr>
<div class="input">
<input id="input-text" type="text" name="" value="">
<button id="btn">Add</button>
</div>
<div class="to-do">
<h3 class="text color1">TO-do-list</h3>
<hr>
<ul id="toDoList">
</ul>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src= "js/todo.js"></script>
</body>
</html>$('#btn').on('click', function() {
let newTask = $('#input-text');
if (newTask.val() === '') {
alert('You need to write something');
} else {
let editButton = ('<button class = edit > Edit' + '</button>');
let finishedButton = ('<button class = finished > Finished' + '</button>');
let deleteButton = ('<button class = delete > Delete' + '</button>');
let input = `<input disabled value="${newTask.val()}" >`;
$('#toDoList').append('<li>' +input+ editButton + finishedButton + deleteButton + '</li>');
newTask.val('');
}
$('.edit').on('click', function() {
$('input').prop('disabled',false);
});
$('.finished').on('click', function() {
$(this).parent();
$('#completed').append($(this).parent());
});
$('.delete').on('click', function() {
$(this).parent().fadeOut(500, function() {
$(this).remove();
});
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>There is an issue when I click on the edit button as all other elements also respond to the click event. It's my first experience with coding, so I'm unsure if there are any other issues in my code. Thank you in advance for your help.