I am creating a chat app using php, mysql and javascript and I want to update the data in real time from json but the full data is printed at intervals below the old data. Javascript code:

// fetch chat
setInterval(() =>
{
  fetch("http://localhost/diaryface/config/chat.php").then(response => response.json()).then(data =>
  {
    // selfmassage
    if (sessionuserid == urlid)
    {
      const selfmessages = data.filter(item => item.sendbyid == sessionuserid && item.receivebyid == sessionuserid)
      for (let i = 0; i < selfmessages.length; i++)
      {
        const element = selfmessages[i]
        const messageitem = document.createElement('li')
        messageitem.classList.add('clearfix')
        messageitem.innerHTML = `<div class="message my-message float-right">` + element.message + `</div>`
        messagesarea.appendChild(messageitem)
      }
    }
    // other message
    else
    {
      const messages = data.filter(item => item.sendbyid == urlid || item.receivebyid == urlid)
      for (let i = 0; i < messages.length; i++)
      {
        const element = messages[i]
        const messageitem = document.createElement('li')
        messageitem.classList.add('clearfix')
        if (element.sendbyid == sessionuserid) {
          messageitem.innerHTML = `<div class="message my-message float-right">` + element.message + `</div>`
        } else {
          messageitem.innerHTML = `<div class="message other-message float-left">` + element.message + `</div>`
        }
        messagesarea.appendChild(messageitem)
      }
    }
  })
}, 1000)