How to keep the spacing of text input from an HTML textarea

My process so far is:

1. Take text input into a form's textarea (often, an email with spaces, linebreaks, and perhaps special characters)

   <label for="sample">Sample:</label><br>
   <textarea id="sample" rows="4" cols="50" style="white-space: pre;">
   

2. Output it in the rendered webpage using javascript.

   function generate() { 
   
     var sample = document.getElementById("sample").value;
     //get the pasted in text with spaces and linebreaks from the text area
   
     var message = "<p><br> <b>Sample text:</b> More text, html formatting " + sample + " </p>";
     //make a variable with html formatted text and the sample text
   
     document.getElementById("pagetext").innerHTML = message;
     //show the message var text by overwriting the "pagetext" placeholder on the screen when user clicks button.
   
   }
   

Right now spacing and line breaks are not kept.

For example with Input \nText

The output is: Text

How do I keep the spacing and formatting while using HMTL text areas and Javascript?