variable being overwritten by default?

Hello experts, in the code sample below I've set a default folderID of 1.  My "folderID click function" is successfull passing the selected folderID to "inboxresults.cfm".  

However, my "next" and "previous" click functions always pass the default folderID value of 1 (and never a newly selected value).  

Can you please help me understand how to update the default value  (I thought I was by setting "var folderID = $(this).attr('data-id'); " in my ".folderID" click function.

As always, your time is appreciated.
K

<script type="text/javascript">
$.ajaxSetup ({
    // Disable caching of AJAX responses
    cache: false
});

var folderID = 1

	



$(function() {
		
	function loadMessages() {	  
 	var myInbox = "/test/inboxResults.cfm?folderID="+folderID;
	$("#messageList").load(myInbox)
	  var myFolders = "/test/folders.cfm";
	$("#mainFolders").load(myFolders)  
	}   
	
	loadMessages();
	
	$("#next").click(function() {
		var myInbox = "/test/inboxResults.cfm?folderID="+folderID;
		myInbox+="&startRow="+nextstart
		$.get(myInbox,function(data){
		$("#messageList").html(data);
	  });
	})
	
	
	$("#prev").click(function() {
		var folderID = $(this).attr('data-id'); 							  
		var myInbox = "/test/inboxResults.cfm?folderID="+folderID;
		myInbox+="&startRow="+prevstart
		$.get(myInbox,function(data){
		$("#messageList").html(data);
	  });
	})
	

	$(".folderID").click(function() {
 		var folderID = $(this).attr('data-id'); 				  
		var myInbox = "/test/inboxResults.cfm?folderID="+folderID;
		$.get(myInbox,function(data){
		$("#messageList").html(data);
	  });
	})	
})


var prevstart = 1
var nextstart = 1

function showPrev(newprevstart){
	prevstart = newprevstart
	$("#prev").show()
}

function hidePrev(){
	$("#prev").hide()
}

function showNext(newnextstart){
	nextstart = newnextstart
	$("#next").show()
}

function hideNext(){
	$("#next").hide()
}
</script>

Select allOpen in new window