Как заполнить поле ввода / текста html несколькими кодами jquery

Question

Я пытаюсь заполнить поле ввода различными скриптами jquery. Я хочу, чтобы каждый заполненный текст занимал строку, а затем следующий щелчок, чтобы заполнить текст следующей строкой, в настоящее время, когда вы нажимаете первую кнопку,поле ввода заполняется по желанию, проблема в том, что при нажатии второй кнопки вместо заполнения нового предложения в поле он заменяет уже существующий текст, который был заполнен при первом нажатии кнопки. ниже мой код для заполнения поля ввода:

function populatethisfirst(){
  document.getElementById("delrver now").value= "Enfoncement plus large qu'une balle de tennis";
}

jquery для второй кнопки заполнения:

function populatethissecondline(){
  document.getElementById("delrver now").value= "Enfoncement plus large qu'une balle de tennis";
}

HTML для поля ввода / текстовой области:

<textarea rows="5" id="deliver now" cols="50" name="populate data" >
populate here</textarea>

Answer 1

Вы заменяете контент textarea вместо добавления к нему. Использование += вместо = для второй строки достаточно (плюс разделение строк с помощью \n):

b1.addEventListener('click', function() {
  ta.value += '1: Enfoncement plus large qu\'une balle de tennis';
});
b2.addEventListener('click', function() {
  ta.value += '\n2: Enfoncement plus large qu\'une balle de tennis';
});

<textarea id="ta"></textarea><br>
<button id="b1">first</button><button id="b2">second</button>