Why did we declare const checkbox twice, in the form & UL event handlers? & How were we able to do it?

const form = document.querySelector("#registrar");
const input = form.querySelector("input");
const ul = document.querySelector("#invitedList");

form.addEventListener("submit", (e) => {
    e.preventDefault();
    const text = input.value;
    input.value = "";
    const item = document.createElement("li");
    item.textContent = text;
    const label = document.createElement("label");
    label.textContent = "Confirmed";
    const checkbox = document.createElement("input");
    /*here we created the const checkbox for the first time*/
    checkbox.type = "checkbox"
    label.appendChild(checkbox);
    item.appendChild(label);
     ul.appendChild(item);
});

ul.addEventListener("change",(e) => {
 const checkbox = e.target;
  /*Why do we create it  again and how are we able to?*/
 const checked = checkbox.checked;
 const listItem = checkbox.parentNode.parentNode;

 if (checked) {
     listItem.className = "responded"
 } else { 
   listItem.className = "" }    
});