jQuery .append () no se agrega al área de texto después de editar el texto

Toma la siguiente página:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"/>
</head>
<body>
    <div class="hashtag">#one</div>
    <div class="hashtag">#two</div>
    <form accept-charset="UTF-8" action="/home/index" method="post">
        <textarea id="text-box"/>
        <input type="submit" value ="ok" id="go" />
    </form>

    <script type="text/javascript">
        $(document).ready(function() {

            $(".hashtag").click(function() {
                var txt = $.trim($(this).text());
                $("#text-box").append(txt);
            });

        });
    </script>
</body>
</html>

El comportamiento que esperaría y que quiero lograr es que cuando hago clic en uno de losdivs con clasehashtag su contenido ("#one" y "#two" respectivamente) se agregará al final del texto entextarea text-box.

Esto sucede cuando hago clic en las etiquetas hash justo después de que se carga la página. Sin embargo, cuando también empiezo a editar el texto entext-box manualmente y luego vuelva a hacer clic en cualquiera de los hashtags que no se agregan en Firefox. En Chrome sucede lo más extraño: todo el texto que escribo manualmente se reemplaza con el nuevo hashtag y desaparece.


Probablemente estoy haciendo algo muy mal aquí, por lo que agradecería si alguien puede señalar mi error aquí y cómo solucionarlo.

Gracias.

Respuestas a la pregunta(4)

Su respuesta a la pregunta