JavaScript – Comments duplicating on another div

I am creating a comment box and I managed to append whatever I type to a div I wanted, however I have added another input and trying to append that along with the comments, however when I do this the second time, the previous duplicates. I know I’m doing something wrong in my display_commnents function, however I’m not entirely sure what it could be, basically I just want whatever is entered on both title and comments to append on the comment-box with title on top and comment just below. Below is my code:

<div class="container">
    <h1>Write New Post</h1>
    <form>
        <input id="title" type="text" placeholder="Title" value="">
        <textarea id="" placeholder="Leave us a comment" value=""></textarea>
        <input id="giphy" type="text">
        <div class="btn">
            <input id="submit" type="submit" value="comment">
            <button id="clear">Cancel</button>
        </div>
    </form>
</div>
<div class="comments">
    <h2>Comments</h2>
    <div id="comment-box" value="submit">
    </div>
</div>

And this is my JS code:

    const title = document.querySelector('#title')
const field = document.querySelector('textarea');
const textBackUp = title.getAttribute('placeholder')
const backUp = field.getAttribute('placeholder')
const btn = document.querySelector('.btn');
const clear = document.getElementById('clear')
const submit = document.querySelector('#submit')
// const comments = document.querySelector('#comment-box')
const titleText = document.getElementById('title')
const comments = document.getElementById('comment-box')

let title_arr = [];
let comments_arr = [];

title.onfocus = function(){
    this.setAttribute('placeholder', '')
}

title.onblur = function(){
    this.setAttribute('placeholder', textBackUp)
}

field.onfocus = function(){
    this.setAttribute('placeholder','')
    this.style.borderColor = '#333'
    btn.style.display = 'block'
} // when clicking on this, placeholder changes into ' ', border colour changes and buttons will appear.

field.onblur = function(){
    this.setAttribute('placeholder',backUp)
} //click away, placeholder returns

const display_comments = () => {
    let list = '<ul>'
    title_arr.forEach(title => {
    comments_arr.forEach(comment => {
        list += `<li>${title} <br>${comment}`
    })
    })
    list += '</ul>'
    comments.innerHTML = list
}

clear.onclick = function(e){
    e.preventDefault();
    btn.style.display = 'none'
    title.value = ''
    field.value = ''
    display_comments()
}

submit.onclick = function(e){
    e.preventDefault();
    const head = title.value;
    const content = field.value;
    if(head.length > 0){
        title_arr.push(head)
        display_comments();
        title.value = '';
    }
    if(content.length > 0){
        comments_arr.push(content)
        display_comments();
        field.value = '';
    }
}

any help would be appreciated