jQuery click on images and "copy/paste" append img element value into input of type text

It is about chat script in which users can click on images of emoji so that value can be inserted into input of type text. I have it working good but problem is when I click on different img emoji I want that img element value.

jquery

$(document).on('click', '.copy', function(){
        $('.paste').val(function(index, val){
            return val + $('.copy').attr('value');
        });

});

html

<form id="frmsend" method="post" action="process.php">
<div class="input-group">
    <input class="form-control paste" type="text" name="text" id="text" placeholder="type your text here" autofocus />
    <div class="input-group-append">
           <input class="form-control" type="submit" name="send" value="Send" id="send" />
    </div>
</div>
</form>
<img class="copy" src="openmoji/1F642.svg" height="40" width="40" value=":)"></img>
<img class="copy" src="openmoji/1F609.svg" height="40" width="40" value=";)"></img>
<img class="copy" src="openmoji/1F600.svg" height="40" width="40" value=":D"></img>
<img class="copy" src="openmoji/1F618.svg" height="40" width="40" value=":*"></img>
<img class="copy" src="openmoji/1F606.svg" height="40" width="40" value="xD"></img>
<img class="copy" src="openmoji/1F61C.svg" height="40" width="40" value=";P"></img>
<img class="copy" src="openmoji/1F61B.svg" height="40" width="40" value=":P"></img>
<img class="copy" src="openmoji/1F61D.svg" height="40" width="40" value="xP"></img>

actual demo of problem