Laying a text over another text in response to a button

So I am trying to figure this out and I'm quite lost. This is what I would like my program to do.

TEXT1

button

When I press the button, I would like this to happen:

TEXT2

button

When I press the button again, I would like:

TEXT3

button

And for the last text, I would like the button to disappear:

TEXT4

So I'm not really giving the user an option to go back and read the previous texts if she already clicked the button to read the next text.

Now, this is the closest to my getting to producing this effect. I would assign a class to all my TEXTs. Let's call it Texts. And I will give my button a class. Let's call it readMore. And to readMore I will call, click(function({})). So when I click the button, I would call fadeOut() to (this), which is the current text, TEXT1. And then call fadeIn() to (next), which is TEXT2. But then problem with this is that (This) will always refer to TEXT1 and (next) will always refer to TEXT2. So that is my problem. Any possible solutions?

This is my code that I came up with:

$(document).ready(function(){
    $('.readMore').click(function(){
        $('.texts').(this).fadeOut("fast");
        $(this).next().fadeIn("fast");
    });
});