Estoy tratando de hacer que el título de la nota sea editable cuando alguien hace clic en él. Funcionó cuando se aplicó en una sola nota, pero su función (contenteditable) no funciona en todos los elementos. Aquí está el código javascript:

 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'; }); }

Estoy aplicando este detector de eventos en esta nota que también está hecha en 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> ` })

Deje la línea NoteData. Este es el código en el que estoy aplicando event-listener <h5 class="cardtitle">Note

Gracias