I am trying to make the note title editable when someone clicks on it. It worked when applied on a single note but its (contenteditable) function is not working on all elements. Here is the javascript code:

let notecardTitle = document.getElementsByClassName("cardtitle");
for(let i = 0 ; i < notecardTitle.length ; i++){
notecardTitle[i].addEventListener("click", function changeTitle(e) {
        console.log("change", e);
        notecardTitle.contentEditable = 'true';    
    });
}

I am applying this event-listener on this note which is also made in javascript

let showBox = "";
    noteData.forEach(function(element, index) {
        showBox += `<div class="noteCard my-2 mx-2 card" style="width: 18rem;">
                <div class="card-body">
                  <h5 class="cardtitle">Note 
                  ${index + 1}
                  </h5>
                  <p class="card-text"> 
                  ${element}
                  </p>
                  <button id="${index}" onclick="deleteNote(this.id)" class="btn btn-primary">Delete Note</a>
                </div>
              </div>   `
            })

Leave the NoteData line. This is the code on which i am applying event-listener <h5 class="cardtitle">Note

Thanks