javascript - Append new line of text without using ".append" -

i have dropdown has contacts in there, i.e. john, bob, etc. , button next when it's clicked, display contact's phone number in <textarea></textarea>.

each time when pick contact , press button, want display number in textarea , each additional contact's number add want number display below previous number. need line break between each number this.

1234567890

5557778888

when use first function using .append, works way want however, if edit numbers or take out numbers, can't use button add numbers textarea anymore. realized this article it's because text nodes , value can disconnected.

then tried using .val, replaces numbers in textarea instead of appending below it.

what best way solve problem? thanks!

let me know if need additional information.

my javascript functions:

using .append()

    selectoption: function() {          $('#addcontact').click(function() {             $('#tophonenumber').append($('#toadd option:selected').data('number') + '
');          });      }, 

using .val()

    selectoption: function() {          $('#addcontact').click(function() {             $('#tophonenumber').val($('#toadd option:selected').data('number') + '\n');          });      }, 

var nums =[]; . . selectoption: function() {   $('#addcontact').click(function() {     var num =$('#toadd option:selected').data('number');      if (nums.indexof(num)==-1) nums.push(num);     $('#tophonenumber').val(nums.join( '\n'));   }); },