I am doing notes app project but I am stuck at this point where addEventListener is only working for first element for edit button. The first element allows me to edit and save but the second only allows to edit but doesn't save as the first one. I am just a beginner, would really appreciate your help. I am have this have following code:
const notesEl = document.querySelector(".notes");
const editBtn = document.querySelector(".edit");
const deleteBtn = document.querySelector(".delete");
const addNoteBtn = document.querySelector(".add-note");
const main = notesEl.querySelector(".main");
const textArea = notesEl.querySelector("textarea");
editBtn.addEventListener("click", () => {
console.log('Helll');
main.classList.toggle("hidden");
textArea.classList.toggle("hidden");
});
textArea.addEventListener("input", (e) => {
const { value } = e.target;
main.innerHTML = marked(value);
});
addNoteBtn.addEventListener("click", () => {
const newNotesEl = document.createElement("div");
newNotesEl.classList.add("notes");
newNotesEl.innerHTML = `
<div class="notes-tools">
<button class="edit"><i class="fas fa-edit"></i></button>
<button class="delete"><i class="fas fa-trash-alt"></i></button>
</div>
<div class="main hidden"></div>
<textarea></textarea>
`;
document.body.appendChild(newNotesEl);
});
body {
background-color: #7bdaf3;
display: flex;
flex-wrap: wrap;
font-family: "Poppins" ,sans-serif;
min-height: 100vh;
margin: 0;
}
.add-note {
background-color: #9ec862;
color: #fff;
position: fixed;
top: 1rem;
right: 1rem;
border: none;
padding: 0.5rem;
border-radius: 4px;
font-size: 1.2rem;
}
.add-icon {
margin-left: 4px;
}
.notes {
background-color: #fff;
width: 380px;
height: 400px;
margin: 60px 20px;
}
.notes .notes-tools {
background-color: #9ec862;
display: flex;
justify-content: flex-end;
padding: 0.5rem;
}
.notes .notes-tools button {
background-color: transparent;
color: #fff;
border: none;
font-size: 1rem;
margin-left: 0.5rem;
}
.notes .main {
height: 100%;
width: 100%;
}
.notes textarea {
outline: none;
font-family: inherit;
border: none;
height: 100%;
width: 100% ;
}
.notes .hidden {
display: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.2.7/marked.min.js"></script>
<body>
<button class="add-note">Add Note<i class="far fa-plus-square add-icon"></i></button>
<div class="notes">
<div class="notes-tools">
<button class="edit"><i class="fas fa-edit"></i></button>
<button class="delete"><i class="fas fa-trash-alt"></i></button>
</div>
<div class="main hidden"></div>
<textarea></textarea>
</div>
</body>