I have a function to render comments, in which each comment is stored as an object in an array. Comments can have reply comments, in which they have the exact same html and data to render, just their styling is different (via a CSS modifier class).

How can I make this function recursive? The renderReplies(comment.replies) calls a function that is the exact same as renderComments function, just without the mentioned function call renderReplies (as a reply to a reply is the exact same also in styling terms).

const renderComments = (comments) => {
    commentsElement.innerHTML = '';
    comments.forEach(comment => {
        commentsElement.innerHTML += html;

        // data-id attribute
        const liElements = commentsElement.querySelectorAll('.comment');
        const liElement = liElements.item(liElements.length - 1);
        liElement.setAttribute('data-id', comment.id);

        // author
        liElement.querySelector('.comment__author').innerHTML = comment.user.username;

        // avatar src & alt attributes
        const avatar = liElement.querySelector('.comment__avatar');
        avatar.setAttribute('src', comment.user.image.png);
        avatar.setAttribute('alt', comment.user.username);

        // time since posted

        // content
        const p = liElement.querySelector('.comment__text');
        p.appendChild(document.createTextNode(comment.content));

        // score
        liElement.querySelector('.comment__score b').innerHTML = comment.score;

        // replies
        renderReplies(comment.replies);
    });
};