Tagging System - Get position of element in an array an replace it

Tagging System - Get position of element in an array an replace it

first of all I am new in jQuery and my English is not the best.
I try to create a Tagging-System like Stackoverflow and I already found
some useful code. For better understanding here is the current system.
HTML:
<div class="holder">
<span class="test targetLeft" style="background: red;"></span>
<input class="test taggingSystem" type="text" />
<span class="test targetRight"></span>
</div>
jQuery:
$(document).ready(function() {
tags = [];
$(".taggingSystem").keyup(function (e) {
if ($(".taggingSystem").val().substring(0, 1) == " ") {
$('.taggingSystem').val('');
return false;
}
// GET THE VALUE OF THE INPUT FIELD
var value = $('.taggingSystem').val().replace(/\s/g,"");
// IF USER IS HITTING THE BACKSPACE KEY
if (e.which === 8 && value === "") {
var text = $('.targetLeft .tagHolder:last-child
.tagValue').text();
$('.targetLeft .tagHolder:last-child').remove();
$(this).val(text);
}
// IF USER IS HITTING THE SPACE KEY
if (e.which === 32 && value != "") {
$(".targetLeft").append('<span class="test tagHolder"><span
class="test tagValue">' + value + '</span><span class="test
cross">X</span></span>');
tags.push(this.value);
this.value = "";
}
});
$(document).on('click','.targetLeft .tagHolder',function() {
var clickedValue =
$(this).prev('.tagHolder').find('.tagValue').text();
tags.splice(clickedValue, 1);
var value = $('.taggingSystem').val();
if ($(".taggingSystem").val().substring(0, 1) != "") {
$(".targetRight").prepend('<span class="test tagHolder"><span
class="test tagValue">' + value + '</span><span class="test
cross">X</span></span>');
}
var text = $(this).find('.tagValue').text();
var following = $(this).nextAll();
following.remove();
$(".targetRight").prepend(following);
$(this).remove();
$('.taggingSystem').val(text);
});
$(document).on('click','.targetRight .tagHolder',function() {
var value = $('.taggingSystem').val();
if ($(".taggingSystem").val().substring(0, 1) != "") {
$(".targetLeft").append('<span class="test tagHolder"><span
class="test tagValue">' + value + '</span><span class="test
cross">X</span></span>');
}
var text = $(this).find('.tagValue').text();
var following = Array.prototype.reverse.call($(this).prevAll());
following.remove();
$(".targetLeft").append(following);
$(this).remove();
$('.taggingSystem').val(text);
});
$(".holder").click(function (e) {
if(!$(e.target).is('.test')) {
var value = $('.taggingSystem').val();
if ($(".taggingSystem").val().substring(0, 1) != "") {
$(".targetLeft").append('<span class="test
tagHolder"><span class="test tagValue">' + value +
'</span><span class="test cross">X</span></span>');
}
$('.taggingSystem').val('');
var following = $('.targetRight').find('.tagHolder');
$(".targetLeft").append(following);
}
});
});
The problem is that if I click on a tag to write some other text in it,
the data appear at the end of the array. But I want that the data will be
replaced at the same position in the array. As you can see I also tried to
work with splice(). But I don't know how to push the new data at the
position where the deleted text was living. Have you any idea for that?
http://jsfiddle.net/Wky2Z/12/