Insert text to a textarea without modifying text that already exists with input

Question

Personal how to insert a text to this Textarea without Modifying the value that is already inside it when filling in the inputs?

I have a preview https://jsfiddle.net/orpwmc5b/3

when I type in "input" it deletes the pre-defined value...

some way to add without removing when filling in the input?

html code

<b>MEU NOME: </b>
<input type="text" name="fname" id="i1"><br>
<b>Cidade:</b>
<input type="text" name="lname" id="i2"><br>
<b>Estado:</b>
<input type="text" name="fname" id="i3"><br>
<b>Meu Bairro:</b>
<input type="text" name="company" id="i4">

<textarea id="i5">Texto predefinido que nao pode apagar</textarea>

Jquery javascript code

<script>
$( function() {
    function updateTextarea() {
        $( '#i5' ).val( $( '#i1' ).val() + '\n\n' + $( '#i2' ).val() + '\n\n' + $( '#i3' ).val() + '\n\n' + $( '#i4' ).val() );
    }
    $( '#i1, #i2, #i3, #i4' ).keydown( updateTextarea );
});
</script>

Thank you all for your help! ^^

Answer 1

You can use a global variable to store the value of #i5 and concatenate like the others... the event also changed to keyup.

var i5text =  $('#i5').val();

$(function() {
   function updateTextarea() {

        $('#i5').val(i5text + '\n\n' + $('#i1').val() + '\n\n' + $('#i2').val() + '\n\n' + $('#i3').val() + '\n\n' + $('#i4').val());
        }
        $('#i1, #i2, #i3, #i4').keyup(updateTextarea);
    });