title: jQuery .append() not appending to textarea after text edited
body: <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 <em>divs</em> with class <code>hashtag</code> their content ("#one" and "#two" respectively) would be appended at the end of the text in <em>textarea</em> <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><br>
  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.  </p>
  
  <p>Thanks.</p>