Im making a note taking application and the idea here is im trying to make a selection function to transfer my notes from the side list to the editor on the right side of the screen when clicked. So I have the list items all being created dynamically while the ul is created static.

The trouble im facing is how hard it is to click the list items. I have it console.log the work "click' whenever it registers and im not sure why its not working like its suppose it it looks like it only registers when I click the margins of the children of the li and not the h1 or p tags. Also if I click to the side, it makes my ul clickable which is not good as it would just throw everything in the editor.

I have it so when the li tags are created. It dynamically creates then via JS, adds li,h1,p,p. Appends the h1,p,p tags to the li then the li to the container.

Below is an example of my code:

//This is just to show you what happens when you click
//the submit button and how my divs are being dynamically created.
//I have them being created automatically from 
//localstorage on load as well in this same fashion.
submitbutton.addEventListener('click', () => {
        //Creating local variables for new notes
        let NewNoteContainer = document.createElement('li')
        let NewNoteTitle = document.createElement('h1')
        let NewNoteDueDate = document.createElement('p')
        let NewNoteContent = document.createElement('p')
        let RemoveButton = document.createElement('button')

        //Adds values of the input boxes to the newley created Elements
        NewNoteContainer.id = NoteID
        NewNoteContainer.className = 'notes-list-item'
        NewNoteTitle.innerHTML = title.value
        NewNoteDueDate.innerHTML = dueDate.value
        NewNoteContent.innerHTML = content.value

        //This appends the newly created elements to the container and then
        //Appends the container to its div "note-list-container"
        NewNoteContainer.append(NewNoteTitle, NewNoteDueDate,NewNoteContent)
        NoteListContainer.append(NewNoteContainer)

        //Creates an array, makes it a JSON string. Then stores it in localStorage
        let StorageArray = [NoteID,title.value,dueDate.value,content.value]
        localStorage.setItem('Note' + NoteID, JSON.stringify(StorageArray))

        NoteID += 1
})

//This is the debug function im using to try and diag the click issue.
NoteListContainer.addEventListener('click', (a) => {
        if(a.target.parentNode.className == 'notes-list-container') {
            console.log('click')
        }  

})