How to remove the duplication?

1 input is working fine but when put the information in the second input it all the time duplicated new and old, and how to do that first, i.e. if you erase deleted the text, not the previous go in the textarea

<input type = "text" id="text" oninput = "document.getElementById('myInput').value = 'Surname' + '' + document.getElementById('text').value + '\r\n' + 'Sleeps'+ '\r\n' ">
<input type = "text" id="text1" oninput = "document.getElementById('myInput').value +='City' + '' + document.getElementById('text1').value + '\r\n'">
<br / >

 <textarea id="myInput" rows="24" cols="80" name="query_text"></textarea>

Example:
https://codepen.io/anon/pen/pYMpXO
March 19th 20 at 09:06
1 answer
March 19th 20 at 09:08
Solution
If you don't think so

HTML
<input type="text" id="surname" oninput="surname()">
<input type="text" id="town" oninput="town()">
<br / >
<br / >
<textarea id="textarea" name="textarea" rows="20" cols="60"></textarea>
JS
the <script>
 /*when entering names */
function surname() {
 /* get name of input surname */
 var surname = document.getElementById('surname').value;

 /* insert the name of the textarea */
 document.getElementById('textarea').value = 'Surname:' + surname + 'residents \r\n';
}

/*when entering a city */
function town() {
 /* get the input from city town */
 var town = document.getElementById('town').value;

 /* get name of input surname */
 var surname = document.getElementById('surname').value;

 /* insert the name of the textarea */
 document.getElementById('textarea').value = 'Surname:' + surname + 'residents \r\n';
 /* add the city into the textarea */
 document.getElementById('textarea').value += 'Town:' + town;
}
</script>


Be sure to work over logic. For example, if you first enter the city, then surname. I have thrown a base, hop out. Change, improve.

Find more questions by tags HTML