Let me know what Iam doing wrong on this one

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">
                                <label for="commento"></label>
                                <textarea class="comments" placeholder="Let us know what you think!" name="comments" id="comments"></textarea>
                            <button class="addComment" id="addComment"> COMMENT </button>
                            <ul class="commentList" id="commentList"></ul>

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 => {
                var li = document.createElement('li');


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

@imicaustria What is the purpose of this line? You only have a single textarea with class=“comments”. Why not just use document.querySelector(".comments")?

Either way, why would you want to add a click event to the textarea anyway?

I think you need to explain what you mean by “doesn’t seem to work”. What exactly are you trying to achieve with this code? Walk us through the steps of what the user should be able to do based on clicking various elements?