currently stuck on a problem when doing a JS project on creating an online mail application.

For each email, there would be a reply email button, which when clicked on, will run the reply_email function. As shown below, this function would use the compose_email function with the input fields for sender(pre-filled to be the one logged in), recipients, subject and body. For this reply_email function, it would pre-fill the recipients to be the sender of the previous email, and the sender to be you. For the body, it would put the body of the previous email underneath this reply email.

function reply_email(email) {
  // use the compose email template
  compose_email();

  // set the recipient of the reply email as the sender of the original email
  document.querySelector('#compose-recipients').value = email['sender'];
  
  // set the subject of the reply email as 'Re: ' and then the subject of the original email, if a 'Re: ' isn't already there
  if (email['subject'].split(" ", 1)[0] != "Re:") {
    document.querySelector('#compose-subject').value = `Re: ${email['subject']}`;
  } else {
    document.querySelector('#compose-subject').value = email['subject'];
  }

  // can pre-load the values ok, but when submit all the spacing and blank lines in between all disappear. how to fix?
  document.querySelector('#compose-body').value = `\n \n \n On ${email['timestamp']}, \n <${email['sender']}> wrote: \n      ${email['body']}`;

}

As seen in image_1, in the reply_email template, the body section looks ok, with the previous email being a few lines down. However, after successfully sending a reply, all the line spaces would all disappear in the view single email page, as shown in image_2.

Anyone has any idea what the problem may be? Currently quite stuck on this portion.

Any help would be greatly appreciated. Thank you!