const element = document.createElement("article");
  // add classes
  element.classList.add("grocery-item");

  const attr = document.createAttribute("data-id");
  attr.value = id;
  element.setAttributeNode(attr);
  element.innerHTML = `<p class="title">${value}</p>
            <div class="btn-container">
              <button type="button" class="edit-btn"><i class="fas fa-edit"></i></button>
              <button type="button" class="delete-btn"><i class="fas fa-trash"></i></button>
            </div>`;
  // append child
  list.appendChild(element);
  // Edit Button
  const editBtn = element.querySelector(".edit-btn");

I am making a grocery list website and each item in the list like the milk and eggs come under their own article element which is being created in the javascript and I have added the code for that too. Now in the screenshot that I have posted, I have added 3 items in the grocery list, so there are 3 article elements created as per code given under which comes the edit and delete buttons. When I click on the edit button for,suppose eggs,how does it know that I have clicked on the eggs's edit button?

const editBtn = element.querySelector(".edit-btn");

This line accesses the edit button within the required article element but how does it access the required article element in the first place? There is no querySelector for selecting all the article elements in the rest of the code.

I am not entirely sure how to ask this question, so please do tell me some improvements