Moving text from one <textarea> to another by clicking a button

Moving text from one <textarea> to another by clicking a button

HTML

<link rel="stylesheet" href="http://jasny.github.io/bootstrap/assets/css/bootstrap.css">
<div class="row wrapper">
    <div class="span3">
        <div class="control-group">
            <div class="point-and-click-wrapper"> <span class="wrapper-text-selection">word1, </span>
 <span class="wrapper-text-selection">word2, </span>
 <span class="wrapper-text-selection">word3, </span>
 <span class="wrapper-text-selection">word4, </span>
 <span class="wrapper-text-selection">word5, </span>
 <span class="wrapper-text-selection">word6, </span>  <span class="wrapper-text-selection">word7, </span>
 <span class="wrapper-text-selection">word8, </span>
 <span class="wrapper-text-selection">word9, </span>
 <span class="wrapper-text-selection">word10, </span>
 <span class="wrapper-text-selection">word11, </span>
 <span class="wrapper-text-selection">word12, </span>
 <span class="wrapper-text-selection">word13, </span>
 <span class="wrapper-text-selection">word14, </span>
 <span class="wrapper-text-selection">word15, </span>
 <span class="wrapper-text-selection">word16, </span>
 <span class="wrapper-text-selection">word17, </span>
 <span class="wrapper-text-selection">word18, </span>
 <span class="wrapper-text-selection">word19, </span>
 <span class="wrapper-text-selection">word20, </span>
 <span class="wrapper-text-selection">word21, </span>
 <span class="wrapper-text-selection">word22, </span>
 <span class="wrapper-text-selection">word23, </span>
 <span class="wrapper-text-selection">word24</span>

            </div>
        </div>
    </div>
    <div class="fast-right-btns">
        <div class="control-group">
            <button class="btn"><span class=" icon-fastright2">>></span>

            </button>
            <button class="btn"><span class=" icon-fastright">></span>

            </button>
        </div>
    </div>
    <div class="span3">
        <div class="control-group">
            <div class="vertical-spacer"></div>
            <div...

CSS

.text-selection {
    cursor:pointer;
}
.wrapper-text-selection {
    cursor:pointer;
}
.point-and-click-wrapper {
    height: 50px;
    overflow-y: auto;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #cccccc;
    padding: 5px;
    margin-bottom: 5px;
}
.fast-right-btns {
    width: 32px;
    margin-left: 10px;
    float: left;
}
.wrapper { padding: 10px 0 0 10px; }

JavaScript

$("body").on("click", "#copySelected", function(){
    var text = "";
    $("div .highlighted").each(function(){
         text += $(this).text();
         $("textarea").val(text);
    })
})

$("body").on("click", "#copyAll", function(){
    $("textarea").val($("div").text());
})