I have a function that creates a note in the DOM. The issue is that when the note is created, it adds the "fade in" animation class to all notes instead of just the one being created. How can I modify it so that only the newly created note will have the animation effect?
function createNote(note){
const noteContainer = document.querySelector("#note-display");
let noteEl = `<div id="${note.id}" class="note fade-in">
<span onclick="removeNote(this)" class="remove-container">
<i class="fa fa-remove"></i>
</span>
<textarea onchange="updateMessage(this)">${note.message}</textarea>
<p>${note.date}</p>
<p>${note.time}</p>
</div>`
noteContainer.innerHTML += noteEl;
console.log(noteContainer.innerHTML)
}