jquery code that helps us to make simple vertical slider

jqueryCode.js

$(document).ready(function(){

   var begin = 1;
   var end = 5;
   var total =0;
   $('.item').each(function(){total++;});
   // now total contains the number of retrieved rows
   
   for(i=end+1;i<=total;i++){
       $("#"+i).appendTo($("#next"));
    }	
   
   $("#up").click(function(){

   	// first get the class of the last element of the 5-elements list
			   begin = $("#first").attr('title');
			   
			   // change the last element
			   end = end +1;
			   
			   //verify if the end exists 
			   // status = $("."+end).attr('class');
			   status = $("#"+end).attr('class');

			    if(status == 'undefined'){
	           	 end = end-1;
	             // in this case we don't have enough elemtns to slide between 
	             // so we stay in the same list  
	             alert('END OF THE ROAD ');
	           }else{

		               // move the  the old beginning item to the previous box with removing  #first from it  
		               first = $("#first").clone();
		               first.attr('id',begin);
		               first.attr('title','');
		               $("#first").remove();
		               first.appendTo("#previous");
		                
			          			
			            // make the begin point to the next element with the index [begin +1]
			            // and grab 1 element from the next box
			            
			            // 1 here is the step that we want to take so we want to step by 1 element	
			            
			           	begin =  Number(begin)+1;  
			            second = $("#"+begin).clone();
			            id = second.attr('id');
			            second.attr('id','first');
			            second.attr('title',id);
			            $("#"+begin).remove();
			            current_box_content = $("#current").html();
			            $("#current").html('');
			            second.appendTo("#current");
			            $("#current").append(current_box_content);

			           	
			           	$("#"+end).appendTo("#current");


		                // take the first element from the next box and put it in the end of the current box
		                // make call to concat2 function

						   // $("#current").append(concat2());
                
	           }
   	

    


   });
$("#down").click(function(){

              // verify if the previous box is empty then display error  
              total_previous = 0;
              $("#previous > .item").each(function(){total_previous++});
              
              // verify if the previous box have items in it

              if(total_previous == 0)
              {
              	alert('END OF THE ROAD ');
              }else{
                
                // add id="first" to the first element and remove the id="first" from the old one	
              	last     =  $("#"+end).clone();
              	first    = $("#"+(begin-1)).clone();
              	
              	first_id = first.attr('id');
              	second_id = $("#"+begin).attr('title');
			    first.attr('id','first');
			    first.attr('title',first_id);
			    $("#"+begin).attr('id',second_id);
			    $("#"+begin).attr('title','');

              	$("#"+end).remove();
              	
              	next_box_content = $("#next").html();

              	$("#next").html('');
              	$("#next").append(last);
              	$("#next").append(next_box_content);
              	$("#"+(begin-1)).remove();
              	current_box_content = $("#current").html();
              	$("#current").html('');
              	$("#current").append(first);
              	$("#current").append(current_box_content);

              	
               
              
               

               begin = Number(begin)-1;
               end = Number(end)-1;
                
              }



			});

			
   
   
});