How can I use jQuery line by line-CodePudding

I want to display comments line by line in a div but the div is closing first and after that the comments are listing.

if (comments.num_replies > 0) {
    $("#showComment").append(`<div id="replyContainer${comments.comment_id}" >`);

    comments.comment_replies.forEach((replies) => {
        $("#showComment").append(`
            <div >
                <img src="${home_url}img/user.png">
                <div >

                    <div ><p >@${replies.replier_username}</p><p >${replies.dates}</p></div>
                    <p >${replies.reply_comment_content.replace(/\n/g, "<br>")}</p>
                </div>
            </div>
        `)
    });

    $("#showComment").append(`</div>`);
}

CodePudding user response：

You can try something like this

if (comments.num_replies > 0) {
    let replies = comments.comment_replies.map((replies) => (
        `<div >
            <img src="${home_url}img/user.png">
            <div >

                <div ><p >@${replies.replier_username}</p><p >${replies.dates}</p></div>
                <p >${replies.reply_comment_content.replace(/\n/g, "<br>")}</p>
            </div>
        </div>`
    ));

    $("#showComment").append(`<div id="replyContainer${comments.comment_id}" >${replies.join('')}</div>`);
}