How to get div content in an alert box or store as a variable?

Question

I have 3 contents in a div showing only one content at a time. I append a prev and next button to show the contents of the div one at a time using jquery.
What I will like to do now is to get the content of the div in an alert box when either button is clicked. alert('content in the div'); or at least store it in a variable to be passed to a controller

Below is my code:

HTML:

<div id="tabs">
<div>Blah</div>
<div>Blah blah</div>
<div>Blah blah blah</div>
</div>

JQUERY:

$('#tabs div').first().attr('class', 'current');

$('#tabs div').each(function(i) {
i = i + 1;

$(this).attr('id', 'tab-' + i);

if(i !== $('#tabs div').size()) {
    $(this).append('<button class="tabPagination" rel="tab-' + (i + 1) + '">Next</button>');
}
if(i !== 1) {
    $(this).append('<button class="tabPagination" rel="tab-' + (i - 1) + '">Previous</button>');
}                
});            

    $('#tabs div[class!="current"]').hide();

    $('.wkend').on('click', '.tabPagination', function(evt) {
   evt.preventDefault();
       alert('content in the div');
       $('.current').removeAttr('class');
       $('#tabs div[class!="current"]').hide();
       $('#' + $(this).attr('rel')).show();
});

The html is my view, I will like to get the contents of the div eg "Blah, Blah blah" when the Next and Previous button is clicked.

Thank you for your help.

Answer 1

JSfiddle Example

var current = 0;
var max = 3;
$('#next').click(function(){
     current++;
     if(current > max)
         current = max;
     else
         window.alert( $('#tabs div:nth-child('+current+')').text() );
});

$('#prev').click(function(){
     current--;
     if(current < 1)
         current = 1;
     else
          window.alert( $('#tabs div:nth-child('+current+')').text() );
});