Btukfyl

In the above image , when I click on Add person, Person 2 row gets created and so on. I have a copy icon for each row. Now when I click on an icon, I am trying to copy the user entered text from the input field and the text displayed in another text area (Hi! You entered). I have created a text area element to store the copied text ( texts from both input field and text area). But I am facing the below issues.

1. The newly created textarea element occupies space which I don't want to happen. If I hide the element , then copy to clipboard functionality doesn't work. How to achieve this?


2. 
   

   If I enter 1 in the input field for Person 1 , 2 in Person 2 input field , on click of copy from person 1 , it pastes Hi! You entered 2, but that is wrong, because I am binding the user entered input value to the newly created text area element which is not as expected. Ideally , it should copy the text for that particular row and binding it to the dummy text area. How to achieve this?

   
   
   

   <div>
   
   <textarea>Hi! You entered</textarea>  
   
   <textarea #resultField>Hi! You entered {{resultamount}</textarea>//This is the newly created element to combine the above text and user entered input from input field 
   
   </div>  
   
   
   
   <div>
   
      <input #enteramount (input)="getamountValue(enteramount)">
   
      <a (click)="copyInputMessage(resultField)">{{'copyMsg' | translate}}</a>
   
   </div>
   
   
   
   ngOnInit() {
   
      this.persons = [
   
         { 'name': 'Person 1' }
   
      ];
   
   }
   
   
   
   getamountValue(inputAmount) {
   
      this.resultamount = inputAmount.value;
   
   }
   
   
   
   copyInputMessage(outputField){
   
      outputField.select();
   
      document.execCommand('copy');
   
      outputField.setSelectionRange(0, 0);
   
   }
   
   
   
   //function called on click of Add New button to add consecutive rows of Person
   
   addNewRow() {
   
      this.persons.push({ 'name': 'Person ' + (this.persons.length + 1) });
   
   }