Tengo el siguiente código JavaScript que se activa una vez que se carga DOM:

 const add_note = () => { // Creates a new note and its props const new_note = document.createElement("div"); const new_input = document.createElement("input"); const new_form = document.createElement("form"); const new_ol = document.createElement("ol"); const new_button = document.createElement("button"); //Populates the new note with inputs and checkboxes for (let i = 0; i < 5; i++) { let new_li = document.createElement("li"); let new_checkbox = document.createElement("input"); new_checkbox.setAttribute("type", "checkbox"); let new_li_input = document.createElement("input"); new_li_input.classList.add("li_input"); new_ol.appendChild(new_li); new_li.appendChild(new_checkbox); new_li.appendChild(new_li_input); } //New note's settings new_note.setAttribute("id", "note"); new_note.classList.add("note"); new_note.appendChild(new_input); new_input.classList.add("note_input"); new_input.setAttribute("placeholder", "Note's title"); new_note.appendChild(new_form); new_form.appendChild(new_ol); new_ol.setAttribute("id", "ol_id"); new_note.appendChild(new_button); new_button.classList.add("more_items"); new_button.setAttribute("id", "more_items"); //Inserts the new note and button const note_block = document.getElementById("notes"); note_block.appendChild(new_note); const button = document.getElementById("more_items"); button.addEventListener("click", add_more_items); button.innerHTML = "+"; };

Sin embargo, una vez que se crean las notas, solo el botón de la primera nota hereda sus funciones como se ve en la siguiente imagen: Código cargado

He intentado todo lo que puedo, pero no pude resolverlo. De todos modos gracias de antemano.