Question

1. I want to display 5 user feedback messages in a span with the id ‘messagefield’.
2. I want the spans to be stacked on top of each other with the newest on top
3. When 5 spans have stacked up, I want to remove them –> replace them
   with the following next 5 messages.

I want this endresult in the markup :

<div class="span4 messageField">
<span id="messagefield">Message 1</span>'
<span id="messagefield">Message 2</span>'
<span id="messagefield">Message 3</span>'
<span id="messagefield">Message 4</span>'
<span id="messagefield">Message 5</span>'
</div>

I have appended the first span messagefield to my div like this with jquery:

$('.messageField').prepend('<span id="messagefield"></span>');

Here is the click function that generates the text for the messagefield:

$("#fireCreate").click(function(e) {
        $("#messagefield").html("Importerar titelsida, vänta ...");
});

this is the markup in the html:

<div class="span4 messageField">
<!-- HERE IS WHERE THE SPANS WILL STACK UP -->
</div>

Answer 1

You could do

//the counter is here just to show you that this works, you could use this to generate an id
var counter = 0;
$("#fireCreate").click(function(e) {
    counter++;
    if($('.messageField span').length === 5){
        $('.messageField span:last').remove();
    }
    $('.messageField').prepend($('<span />', { id: "message"+counter, class: "singleMessage", text : "Importerar titelsida, vänta ..."+counter}));
});

look here http://jsfiddle.net/D4FQd/