Google Firebase - Update contents of text area troubles

I currently have a simple text area on a webpage. When the webpage is loaded, the text area is populated with data from my firebase database. It looks like this:

However, when I update the contents of my firebase database and add a new piece of data, this happens:

Rather than adding the missing piece of data to the text area, the whole dataset gets added again. Can any body help me so that the text area just updates and adds any missing data? Here is the code:

var ref = new Firebase(*LINK TO FIREBASE*);

        ref.on('value', function(snapshot) {

        console.log(snapshot.val());

        var data = snapshot.val();

        for (var key in data) {

          if (data.hasOwnProperty(key)) {

            document.getElementById('textAreaFirebase').value += data[key] + " ";

            console.log('Value Added');

          };
        }
      });

<div id="textBoxFirebase">
    <form>
    Firebase Data<br>
    <textarea rows="4" cols="50" id="textAreaFirebase"></textarea>
    </form>
  </div>

Thank you - G

via GeorgeBT