JQuery .append not appending to textarea after text edited
<p>Take the following page:</p>

<pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"/&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class="hashtag"&gt;#one&lt;/div&gt;
        &lt;div class="hashtag"&gt;#two&lt;/div&gt;
        &lt;form accept-charset="UTF-8" action="/home/index" method="post"&gt;
            &lt;textarea id="text-box"/&gt;
            &lt;input type="submit" value ="ok" id="go" /&gt;
        &lt;/form&gt;
        &lt;script type="text/javascript"&gt;
$(document).ready(function(){

  $(".hashtag").click(function(){
    var txt = $.trim($(this).text());
    $("#text-box").append(txt);
  });
});
        &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>The behavior I would expect, and that I want to achieve is that when I click on one of the divs with class <code>hashtag</code> their content ("#one" and "#two" respectively) would be appended at the end of the text in textarea <code>text-box</code>.</p>

<p>This does happen when I click on the hash tags just after the page loads. However when I then also start editing the text in <code>text-box</code> manually and then go back to clicking on any of the hashtags they don't get appended on Firefox. On Chrome the most bizarre thing is happening - all the text I type manually gets replaced with the new hashtag and disappears.</p>

<p>I probably am doing something very wrong here, so I would appreciate if someone can point out my mistake here, and how to fix that.
Thanks.</p>
