A complete beginner here. I am trying to update the innerText of the a label when an user clicks on the "update" button.

this is what I have in my ejs file:

<div>
      <ul>
        <% habits.forEach(item=> { %>
          <li>
            <label id=<%=item.id %> class="<%= item.title %>" for="<%= item.title %>">
              <%= item.title %>
            </label>
                <button><span id="<%=item.id%>" class="habit"> delete</span></button>
                <button class="editBtn" id=<%=item.id %>>Edit</button>
          </li>
          <% }) %>
          </ul>
              <form class="mainForm" id="habitForm" action="/manageHabits" method="GET">
                <label for="editButton"></label>
                <input type="hidden" name="habitId" />
                <input id="updateInput" type="text" name="habitName" />
                <input type="submit" id="submit" value="Update" />
              </form>
    </div>

and this is what I have in my js:

    let form = document.querySelector("#habitForm")
    form.addEventListener("submit", async (e) => {
        e.preventDefault();
        let updateInput = document.querySelector("#updateInput");
        let value = updateInput.value;
        let label = document.querySelectorAll("label");
        
        label.innerText = value;
        let primaryKey = label.id;
        let url = `/manageHabits/${primaryKey}`;
        console.log(value)
        // label = document.querySelector('label')
        
        // console.log(e)
        // let parentEl = e.target.parentElement;
        // parentEl.querySelector("label").innerText = updateForm["habitName"].value;
        //updateForm["habitId"].value = parentEl.id;
        let results = await fetch(url, {
        method: "PUT",
        headers: { 'Content-type': 'application/json; charset=UTF-8' },
    });
    let records = await results.json();
    refresh(records);
    });