javascript – Add text on click jquery

Question:

There is an input field, a button and an output field. The output field is already filled with value. It is necessary that on pressing the button the text is not overwritten, but added to the existing one. Here is an example

<div>
<input type ="text" id="first">
</div>
<div>
<input type ="button" value="button" id="btn">
</div>
<div>
<input type ="text" value="someText" id="last">
</div>

$("#btn").on('click', function () {
    var t1 = $('#first').val();
    $('#last').val(t1);
});

Here on a third-party resource https://jsfiddle.net/atg5m6ym/7609/

Answer:

So:

$("#btn").on('click', function () {
    var t1 = $('#first').val();
    console.log(t1);
    $('#last').val(function(i, val){
    	return val + ' ' + t1;
    });
});

p {
    margin: 1em 0 0;
}

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  
<div>
<input type ="text" id="first">
</div>
<div>
<input type ="button" value="button" id="btn">
</div>
<div>
<input type ="text" value="someText" id="last">
</div>

.val( function(index, value) )

The value attribute will be set to the value returned by function. A function for each of the selected items. When called, the following parameters are passed to it: index (the position of the element in the set) and value (the current value of the element's value attribute).