I'm sure there is a simple solution to this, and I'm sure this is a duplicate question, though I have been unable to solve my solution particularly because I don't really know how to phrase it in order to search for other questions/solutions, so I'm coming here hoping for some help.

Basically, I have spans with classes that assigns a background-color property, and inside those spans are words. I have three of these spans, and each time a user clicks on a span I want the class to change (thus changing the background color and inner text).

HTML:

<span class="alternate">
    <span class="blue showing">Lorem</span>
    <span class="green">Ipsum</span>
    <span class="red">Dolor</span>
</span>

CSS:

.alternate span { display : none }
.alternate .showing { display : inline }
.blue { background : blue }
.green { background : green }
.red { background : red }

jQuery:

$(".alternate span").each(function() {
    $(this).on("click", function() {
        $(this).removeClass("showing");
        $(this).next().addClass("showing");
    });
});

This solution works great using $.next until I get to the third click, whereafter .showing is removed, and is not added since there are no more $.next options. How do I, after getting to the last-child, add .showing to the first-child and then start over? I have tried various options including if($(".alternate span:last-child").hasClass("showing")) { etc. etc. }, and I attempted to use an array and for loop though I failed to make it work.

Newb question, I know, but I can't seem to solve this so as a last resort I'm coming here.