async function getNewMessages() {
  // the goal here is trying to get new messages and replacing the old messages with the new ones.
  await fetch(`/get_new_messages/s/${sId}`).then(async function(response) {
    const body = await response.text();
    const jsonText = body.replaceAll('\u0027', '\u0022');
    const item = await JSON.parse(jsonText)/*.replaceAll(`'`, `"`);*/
    console.log("Edited array: "+jsonText);
    console.log("Raw array: "+body);
    console.log("Parsed array"+arr)

    document.querySelector('.channel-messages ul').innerHTML = null;

    for (const obj of item.messages) {
      const message = obj.message
      const sent_by = obj.sent_by
      document.querySelector('.channel-messages ul').insertAdjacentHTML('beforeend', `<li style="padding-left: 10px; color: white; width: 100%;" onmouseover="const collection = this.children; this.style.background = '#535357'; this.style.color = 'white';" onmouseout="const collection = this.children; this.style.background = 'transparent'; this.style.color = 'white';"><b><img src="/assets/images/Goobler-meowsicles.png" width=40/> <onclickFunc onclick="">${sent_by}</onclickFunc> <span class="badge" style="background: mediumpurple;">TESTER <i class="fa fa-check"></i></span> </b> <br>${message}</li>`);
      console.log(obj.message)
    }

    //original code
    /*document.querySelector('.channel-messages ul').insertAdjacentHTML('beforeend', `<li style="padding-left: 10px; color: white; width: 100%;" onmouseover="const collection = this.children; this.style.background = '#535357'; this.style.color = 'white';" onmouseout="const collection = this.children; this.style.background = 'transparent'; this.style.color = 'white';"><b><img src="/assets/images/Goobler-meowsicles.png" width=40/> <onclickFunc onclick="">${json.message}</onclickFunc> <span class="badge" style="background: mediumpurple;">TESTER <i class="fa fa-check"></i></span> </b> <br>${json["messages"]['message']}</li>`);*/
  })
  //location.reload()
}