Dynamicaly adding text to a "scroll box" not working.

I'm really new with JS, HTML, CSS etc. but am trying to create a proof of concept that uses web sockets. I want to display text either pushed from the server or entered by the use and sent to the server by adding the text to a scroll text area. I'm just attempting to get text added by the used working now.

The use types the text into an input text box and either clicks on a button or presses "enter" to move the text to the scroll box. It works when I click the button but when I press return in the input text area it's added to the text in the scroll box but almost immediately ALL the text that has been added vanishes!