Uncaught RangeError: Maximum call stack size exceeded！

[Beginner]

I’m making a page with a load-more button,
for example,I have an array with 30 items, 10 default items is loaded from index 0-9 when I load the page. When I click the load button for the first time, 10 more items from index 10-19 is loaded by using ajax, so far, everything looks good. But when I click the load button again, to load the last 10 items which is index 20-29,It throw out the error message is is Uncaught RangeError: Maximum call stack size exceeded. And It only load from 20-25.
Moreover, I think the data from php is ok.
Can anyone help me to solve this problem. Below is my code part:

$(document).ready(function() {
  $("#load_btn").click(function() {
    var clicked = $("#load_mark").val();
	var click_times = $("#click_times").val();
	var index_begin = $("#load_btn").attr("name");
	var question_id = $("#question_id").val();
	var remainder = $("#remainder").val();
	var browse = $(".browse_mark").val();

	//load no more
	if (parseInt(click_times) ==0) {
		  document.getElementById("load_btn").disabled = true;
		  document.getElementById("load_btn").innerHTML = 'Load complete';	
	}	

	//load 10 questions
	if (parseInt(clicked) < parseInt(click_times)-1) {
			$.ajax({
				type: 'POST',
				datatype: 'json',
				url: "detailpage/helper/load_reply.php",
				data: "question_id="+question_id+"&index_begin="+index_begin+"&remainder="+remainder,
				async:false, 
    			beforeSend: function () {
        			$(".spin").show();
    			},						
				success: function(data) {
					$(".spin").hide();
	   			var dataArr = eval("(" + data + ")");
		        for (var i=0;i<10;i++) { 
			        var imgurl = dataArr[i]['imgurl'];
					var repliername = dataArr[i]['repliername'];
					var questionreply = dataArr[i]['questionreply'];

				li = $("<li class='li'></li>")	
				$(".li").append(li);
				$(li).append("<p><img class='portrait' src = '"+imgurl+"' name='portrait' />&nbsp;"+repliername+"</p>");	
				$(li).append(questionreply);
				$(li).append("<hr style='height:1px;border:none;border-top:1px dashed #960;' />");		
				index_begin = parseInt(index_begin)+1; 
				}				  		  	   
				},
				error: function() {
					alert("json questionreply reload fail");
		 		}
			});	
				$("#load_btn").attr("name",index_begin);		  			  
	}
	
	//load last page 10 or <10
	if (parseInt(clicked) == parseInt(click_times)-1) {	
			$.ajax({
				type: 'POST',
				datatype: 'json',
				url: "detailpage/helper/load_reply.php",
				data: "question_id="+question_id+"&index_begin="+index_begin+"&remainder="+remainder,
    			beforeSend: function () {
        			$(".spin").show();
    			},						
				success: function(data) {
					$(".spin").hide();
	   			var dataArr = eval("(" + data + ")");
				var count = dataArr.length;
		    	for (var i=0;i<count;i++) { 				
			        var imgurl = dataArr[i]['imgurl'];
					var repliername = dataArr[i]['repliername'];
					var questionreply = dataArr[i]['questionreply'];

				li = $("<li class='li'></li>")	
				$(".li").append(li);
				$(li).append("<p><img class='portrait' src = '"+imgurl+"' name='portrait' />&nbsp;"+repliername+"</p>");	
				$(li).append(questionreply);
				$(li).append("<hr style='height:1px;border:none;border-top:1px dashed #960;' />");					
				}	
				},
				error: function() {
					alert("json questionreply reload fail");
		 		}
			});					 
				document.getElementById("load_btn").disabled = true;
				document.getElementById("load_btn").innerHTML = 'Load complete';						
	}

if (parseInt(clicked) < parseInt(click_times)-1) {	
	clicked++;
	$("#load_mark").val(clicked);
	$("#load_btn").attr("name",index_begin);	
}
							
  });
});

The php part:

for ($index_begin;$index_begin<$index_end;$index_begin++)
{   
    $data[] = array('imgurl'=>$replies[$index_begin]['imgurl'],'repliername'=>$replies[$index_begin]['repliername'],'questionreply'=>$replies[$index_begin]['questionreply']);          
}
echo json_encode($data);