Trouble with edit button for To Do App JavaScript

Issue

I tried creating an edit button for editing a created task, and it works for the very first task that i create.

1. However for subsequent tasks, the edit button for the respective tasks focus on editing the input on my first task again.

2. For every new task created, it changes the first task back to the very first original task that was written.

   To-Do List

    <div class="container">
        <div class="row mb-5">
            <div class="col h1 text-white text-start text-center text-md-start text-lg-start">TO-DO APP</div>
        </div>
   
        <div class="row">
            <div class="h6 text-white text-start text-center text-md-start text-lg-start">CREATE A TO-DO</div>
        </div>
   
        <form id="todo-form">
            <div class="row mb-4">
                <div class="col">
                    <input class="form-control" name="newTask" type="text" placeholder="eg. Do the laundry"> 
                </div>     
            </div>
   
            <div class="row">
                <div class="h6 text-white text-start text-center text-md-start text-lg-start">CATEGORY</div>
            </div>
   
            <div class="row mb-3">
                <div class="col-6">
                    <input type="radio" class="btn-check" name="category" id="option1" value="Work">
                    <label class="col-12 btn btn-outline-danger p-4 text-white work-task" for="option1">Work</label>
                </div>
                <div class="col-6">
                    <input type="radio" class="btn-check" name="category" id="option2" value="Personal">
                    <label class="col-12 btn btn-outline-primary p-4 text-white personal-task" for="option2">Personal</label>
                </div>
            </div>
   
            <div class="row mb-4">
                <div class="col"><button type="submit" class="btn btn-secondary p-2 w-100 add-task" active>ADD TO-DO</button></div>
            </div>
        </form>
   
        <div class="row mb-2">
            <div class="h6 text-white text-start text-center text-md-start text-lg-start">TO-DO LIST</div>
        </div>
   
        <div class="todoList">
   
        </div>
    </div>
    <script src="main.js"></script>
   

Javascript

const todoForm = document.getElementById("todo-form")

window.addEventListener("load", () => {
    todos = JSON.parse(localStorage.getItem("todos")) || []

    todoForm.addEventListener("submit", (e) => {
        e.preventDefault()
        if (e.target.elements.newTask.value != "") {
            const todo = {
                task: e.target.elements.newTask.value,
                category: e.target.elements.category.value
            }
    
            todos.push(todo);
    
            localStorage.setItem("todos", JSON.stringify(todos));
    
            e.target.reset()
    
            showList()
        }
    })
    
    showList();
})

function showList() {
    let outPut = '';
    let taskListShow = document.querySelector(".todoList")
    const taskName = document.querySelector(".todoContent")

    todos.forEach((data, index)=> {

        outPut += `
        <div class="row todoList mb-3">
            <div class="col-10 col-lg-8 col-md-7 col-sm-6">
                <input class="todoContent no-border text-white text-center" value="${data.task}" readonly>
            </div>
            <div class="col">
                <div class="row action">
                    <div class="col-6">
                        <button type="button" class="btn btn-secondary col-12" onClick="editItem()">Edit</button>
                    </div>
                    <div class="col-6">
                        <button type="button" class="btn btn-danger col-12" onClick="deleteItem(${index})">Delete</button>
                    </div>       
                </div>
            </div>
        </div>`
    });
    taskListShow.innerHTML = outPut;
}

function deleteItem(index) {
    todos.splice(index, 1)
    localStorage.setItem("todos", JSON.stringify(todos))
    showList()
}

function editItem() {
    const taskName = document.querySelector(".todoContent")
    taskName.removeAttribute('readonly')
    taskName.focus()
    taskName.addEventListener("blur", (e) => {
        taskName.setAttribute('readonly', true)
        taskName = e.target.value
        localStorage.setItem('todos', JSON.stringify(todos))
        showList()
    })
}

How can make this work?

Solution

Since all of the input class will have todoContent and when you look for a class using querySelector then JS will return you the first matching element with class todoContent.

const taskName = document.querySelector(".todoContent")

CODESANDBOX LINK

What you can do is look for all of the element with class todoContent and then take the particular input on which you have clicked by using the index of the clicked edit button as:

function editItem ( index ) {  // RECEVIVE INDEX
const taskAllName = document.querySelectorAll( ".todoContent" );
const taskName = taskAllName[index];  // USE SPECIFC ELEMENT

So you have to pass the index to function editItem as:

onClick="editItem(${index})">Edit</button>

Answered By - NullPointerException