append new text on textarea - php

Question

I am writing a tag system based on http://jsfiddle.net/joevallender/QyqYW/1/ but when i try to add new tag by typing in textarea, it works fine but when i click on any tag, previous new text will be removed.
HTML
<textarea id="tags"></textarea>
<div id="tagButtons"></div>
Javascript
var tags = [
'JavaScript',
'jQuery',
'HTML5',
'CSS3'
];
var selectedTags = [];
for(var i = 0; i < tags.length; i++) {
var el = $('<span>').text(tags[i]);
$('#tagButtons').append(el);
}
$('#tagButtons span').click(function(){
var val = $(this).text();
var index = selectedTags.indexOf(val);
if(index > -1) {
var removed = selectedTags.splice(index,1);
$(this).removeClass('selected');
} else {
selectedTags.push(val);
$(this).addClass('selected');
}
$('#tags').val(selectedTags.join(', '));
});
​

Answer 1

Your problem is in this line
$('#tags').val(selectedTags.join(', '));
It's overwriting what was in the textarea before.
EDIT:
Try it :
http://jsfiddle.net/QyqYW/92/
var tags = [
'JavaScript',
'jQuery',
'HTML5',
'CSS3',
'PHP'
],
keys = "";
var selectedTags = [];
for(var i = 0; i < tags.length; i++) {
var el = $('<span>').text(tags[i]);
$('#tagButtons').append(el);
}
//changed click event to "on" event..
//it seems that click doesn't bind to dynamically added elements
$('#tagButtons').on("click" , "span" , function(){
//Checks if you've forgot to type "," and then adds your tag
if(keys != ""){
selectedTags.push(keys);
$('#debug').prepend($('<div>').html('Added: ' + keys));
var newEl = $('<span class="selected">').text(keys);
$('#tagButtons').append(newEl);
$('#tags').focus().val(selectedTags.join(', ') + ", ");
keys = "";
}
var val = $(this).text();
var index = selectedTags.indexOf(val);
if(index > -1) {
var removed = selectedTags.splice(index,1);
$(this).removeClass('selected');
$('#debug').prepend($('<div>').html('Removed: ' + removed));
$('#tags').focus().val(selectedTags.join(', ') + ", ");
} else {
selectedTags.push(val);
$(this).addClass('selected');
$('#debug').prepend($('<div>').html('Added: ' + val));
$('#tags').focus().val(selectedTags.join(', ') + ", ");
}
});
//adds tag after you type ","..
//if you forgot to, look above the first line in the on event
$("#tags").keydown(function(evt){
if(evt.which == 188){
selectedTags.push(keys);
$('#debug').prepend($('<div>').html('Added: ' + keys));
var newEl = $('<span class="selected">').text(keys);
$('#tagButtons').append(newEl);
$('#tags').val(selectedTags.join(', '));
keys = "";
} else if(evt.which ==8){
//for after adding tag you can't use Backspace to delete it.
//remove tag from butotns
if(keys == ""){
evt.preventDefault();
} else {
keys += String.fromCharCode(evt.which).toLowerCase();
}
});

Answer 2

I continued working on the jsfiddle on your original question
add and remove multiple tag by onclick to textarea
see http://jsfiddle.net/joevallender/QyqYW/14/

Answer 3

To be honest I think you should just put the tags into a seperate div or input. They should be stored seperately in a db anyway.

Answer 4

$(this).text();
Abowe, will only return value which was rendered oryginaly into DOM from html. Whatever you type into textarea is not there yet, you have to hook on ('#tags').on('keyup' function () {});
and store what was typed in order to include it to textarea later.