How to disable Complete Button for each list Created?

I am touching up my to do up. I managed to get the complete button disabbled when the user clicks the edit button, but it only does it for the first list, which is weird,because, if I complete any of the list it completes no matter where it is in the index, but the complete button only disables on index 0.

Function that renders the list:

function renderList() {
  // This resets the list innerHTML to the new list
  el.list.innerHTML = taskList.map(function (data, i) {
    return `<div class="task">
            <div class="task-content">
                <div class="task-set" data-id="${data.id}">
                <input class="new-task-created" value="${
                  data.taskNew
                }" readonly style="${data.textDecoration ? "text-decoration: line-through" : ""}"></input>
                <input class="due-date" type="date" value="${
                  data.taskDate
                }" readonly></input>
                <input class="due-time" type="time" value="${
                  data.taskTime
                }" readonly></input>
            </div>
    
            <div class="action-buttons">
                <button onclick="editItem(event, ${i})" class="edit" data-id="${data.id}">Edit</button>
                <button onclick="deleteItem(event, ${i})" class="delete" data-id="${data.id}">Delete</button>
                <button onclick="completeItem(event, ${i})" class="complete" data-id="${data.id}">Complete</button>
        </div>`
  });

el.input.value = "";
}

Edit button function

//function that that edits tasks with date and time.
function editItem(event, i) {


  const editEl = event.target.closest(".task");
  let taskUpdate = editEl.querySelector(".new-task-created");
  let dateUpdate = editEl.querySelector(".due-date");
  let timeUpdate = editEl.querySelector(".due-time");
  let editbtn = editEl.querySelector(".edit");
 
  **let selectComplete = document.querySelector(".complete")**
  
  if (editbtn.innerHTML.toLowerCase() == "edit") {
    taskUpdate.removeAttribute("readonly");
    dateUpdate.removeAttribute("readonly");
    timeUpdate.removeAttribute("readonly");
    taskUpdate.focus();

    //Set the disable for the complete button.
    selectComplete.setAttribute("disabled", "");
    editbtn.innerHTML = "Save";
  } else {
    taskUpdate.setAttribute("readonly", "readonly");
    dateUpdate.setAttribute("readonly", "readonly");
    timeUpdate.setAttribute("readonly", "readonly");
    **selectComplete.removeAttribute('disabled');**
    editbtn.innerHTML = "Edit";
    taskList[i] = {
      id: taskList[i].id,
      taskNew: taskUpdate.value,
      taskDate: dateUpdate.value,
      taskTime: timeUpdate.value,
    };
    // store the list on localstorage because data changed
    storeList();
    // render list again because you've added a new entry
    renderList();
  }
}

I indicated the the two points to look at with astrixes

>Solution :

It only disabled the first button because you are using querySelector() which can only grab 1 single element.

You can use querySelectorAll() to grab all elements that match the criteria, and from there loop through them if needed.

But honestly I think you can get your desired result with something like this instead.

let selectComplete = event.target.parentElement.querySelector(".complete");

This instead takes whatever button was clicked, gets the parent (which should be the action-buttons element) and applies the querySelector to only that element, which in turn only grabs the complete button in the same <div> as the edit button.