How to add text in Text Area when i select text from list using checkbox

We have text-area component and list component,Now when we click in text-area,it loads the list component with data respectively.

When clicked on list it gets list data and set into text-area component.

This list component should work as multi select and get data of selected list and on event set respective data to a text-area. Currently on every click of list text area set accordingly but on every next click of list it replaces previous selected data in text-area.

I am trying to achieve list contains check boxes,on checked it select text and set to text area value without replacing previous text.

How can we put Action when check-box checked?And How can we achieve this task.I am using Ember 1.12 version.

template.hbs
<ul class="list-group" style="font-size: 11px;">
       
             <li class="list-group-item" 
         style="cursor:pointer;">

                 <div class="patient-details" id="masterNotesData" >
                      
                 </div>

             </li>
      
 </ul>


Controller.js

addNotesToTemplate: function(textNotes) {
        console.log("textNote is ",textNotes);
        this.set('textNoteData',textNotes);
        console.log("textnote data is ",this.get('textNoteData'));
        var x=this.get('textNoteData');
        var i=this.get('divId');
        console.log('i value ',i);
        $('.textarea').eq(i).val(x).focus();



    }

Here '.textarea' class define in text-area component