next prev in jquery list to show only 5 and hide others

next prev in jquery list to show only 5 and hide others

I am trying to do this. I fetch the list of DATE's from the table and show
them as list and want the prev and next to traverse these date's showing
only the 5 at any time. Example, while the page loaded, i will display the
recent 7 date's and when prev / next are clicked, let it traverse the
"lists" and show accordingly. This is like pagination but i dont really
want to use a pagination plugin as my requirement is very simple. when
each list/href is clicked, it loads up the content through ajax which is
not shown here as that works fine for me. I need help only to the make the
prev and next traverse the list's pulled from table. please help. thanks.
jQuery:
$( document ).ready(function() {
$("a.next").click(function(){
var $toHighlight = $('.active').next().length > 0 ?
$('.active').next() : $('.pagination li').first();
$('.active').removeClass('active');
$toHighlight.addClass('active');
});
$("a.prev").click(function(){
var $toHighlight = $('.active').prev().length > 0 ?
$('.active').prev() : $('.pagination li').last();
$('.active').removeClass('active');
$toHighlight.addClass('active');
});
}); // close jquery
HTML :
echo "
<div class='pagination pagination-lg'>
<ul class='pagination'>
";
$CID=getinfo(LOGIN);
$SQL = "SELECT DISTINCT date_format(SENTON,'%Y-%m-%d') as DATE from
MESSAGES";
$result = mysql_query($SQL,$LINK);
$i=0;
echo "<li id='prev'><a href='#' class='prev'>Prev</a></li>";
while ( $rows = mysql_fetch_array($result,MYSQLI_ASSOC) ) {
$i++;
echo "<li><a href='#tab".$CID."day".$i."' id='#tab".$CID."day".$i."'
data-toggle='tab' value='$i'>".$rows['DATE']."</a></li>";
}
echo "
<li id='next'><a href='#' class='next'>Next</a></li></ul>
<div id='today' class='tab-pane active'>
<h4></h4><p></p>
</div>
<div id='tab".$CID."day1' class='tab-pane'>
<h4>Day1 Content</h4>
<p> and so on ...</p>
</div>
<div id='tab".$CID."day2' class='tab-pane'>
<h4>Day2 Content</h4>
</div>
<div id='tab".$CID."day3' class='tab-pane'>
<h4>Day3 Content</h4>
</div>
<div id='tab".$CID."day4' class='tab-pane'>
<h4>Day4 Content</h4>
</div>
<div id='tab".$CID."day5' class='tab-pane'>
<h4>Day5 Content</h4>
</div>
<div id='tab".$CID."day6' class='tab-pane'>
<h4>Day6 Content</h4>
</div>
<div id='tab".$CID."day7' class='tab-pane'>
<h4>Day7 Content</h4>
</div>
</div>
</div>
";