Let me know what Iam doing wrong on this one

JavaScript
1

Hello, Iam trying to create a live comment section for a project, (without bootstrap, just prototype). I have multiple comment section and only one of them worked. Im trying to incorporate the forEach method but it doesn’t seem to work, Here is my HTML:

<div class="comment" id="comment">
                            <form>
                                <label for="commento"></label>
                                <textarea class="comments" placeholder="Let us know what you think!" name="comments" id="comments"></textarea>
                            </form>
                            <button class="addComment" id="addComment"> COMMENT </button>
                            <ul class="commentList" id="commentList"></ul>
                        </div>

and my javascript:

function commentSection() {
    let $addComment = document.querySelectorAll('.addComment')
    let $commentText = document.querySelectorAll('.comments')
    let $commentList = document.querySelectorAll('.commentList')
    let commentPost = $commentText[0].value.trim();
    let commentBoxes = document.querySelectorAll('.comments')
    let commentBox = document.querySelector('.comment')

    commentBoxes.forEach(commentBox => {
        commentBox.addEventListener('click', event => {
           if(commentPost){
                var li = document.createElement('li');
                li.appendChild(document.createTextNode(commentPost));
                $commentList[0].appendChild(li);
            } 
        })
    })

    
}

document.getElementById(`addComment`).addEventListener('click', commentSection);