How do I change only the items in the clicked row?

I started making a ToDo List. My Add and Delete buttons are working. The problem I have in the edit part is this: When the user enters data such as Name-Surname-Email-Phone, a TR - TD is automatically created. When the user presses the edit button, he only needs to make changes on the data in that TD. The data entered by the user is inside the P tag. When you press the edit button, these are invisible and inputs are displayed on them.

<pre>function displayTasks() {
    let tbody = document.getElementById('task-list');
    tbody.innerHTML = "";

    for (let task of tasklist) {
        let tr = `
                    <tr class="table-body-items">
                        <td class="id" style="width: 5% !important;">${task.id}</td>
                        <td class="name" style="width: 19% !important;"><p class="name_text">${task.name}</p><input type="text"placeholder="Name" autocomplete="off" class="form-control edit_name"></td>
                        <td class="surname" style="width: 19% !important;"><p class="surname_text">${task.surname}</p><input type="text"placeholder="Name" autocomplete="off" class="form-control edit_surname"></td>
                        <td class="email" style="width: 32% !important;"><p class="email_text">${task.email}</p><input type="text"placeholder="Name" autocomplete="off" class="form-control edit_email"></td>
                        <td class="phone" style="width: 15% !important;"><p class="phone_text">${task.phone}</p><input type="text"placeholder="Name" autocomplete="off" class="form-control edit_phone"></td>
                        <td style="width: 10% !important;">
                            <button type="button" class="btn btn-outline-info btn-sm" data-bs-toggle="modal"
                                data-bs-target="#task-modal" data-source="1" data-content="task1" onclick="editButton(${task.id})">
                                
                            </button>
                        </td>
                        <td style="width: 10% !important;">
                            <button class="btn btn-outline-secondary btn-sm remove" data-source="1" type="button" onclick="deleteTask(${task.id})">
                                ^__i class="fa fa-trash fa-1" aria-hidden="true">
                            </button>
                        </td>
                    </tr>
        `;
        tbody.insertAdjacentHTML("beforeend", tr);
        localStorage.setItem("tasklist", JSON.stringify(tasklist));
    }
}

Live version of the app: <a href="https://youtu.be/T6sB1x3BHm8">ToDo List Test - YouTube</a>[<a href="https://youtu.be/T6sB1x3BHm8" target="_blank" title="New Window">^</a>]

What I have tried:

<pre>I added active to their class name parts and made the css part invisible and the others visible. But it only works for the top data. In other words, the user entered the system 4-5 users (name-surname-email-phone) and wrote the name of the last person he added incorrectly and clicked the edit button. When you click it, it opens an input to the top place, not the last place. What I want is for the button to work where it is. There is a high probability that the class names are the same, so they conflict.

function editButton(id) {
    for(let index in tasklist) {
        if(tasklist[index].id == id) {
            editid = index;

            console.log("tıklanan index: " + editid);
            ui.name.classList.add("active");
            ui.surname.classList.add("active");
            ui.email.classList.add("active");
            ui.phone.classList.add("active");

            ui.editName.classList.add("active");
            ui.editSurname.classList.add("active");
            ui.editEmail.classList.add("active");
            ui.editPhone.classList.add("active");
        }
    }
}