使用相同的按钮多次使用JQUERY函数

我在html代码中有5个分区,在第一个分区后,已经放置了一个"显示更多"按钮.我想触发一个jquery命令,它显示第二个分区,单击"显示更多"按钮一次,第三个分区再次单击按钮,依此类推.

问题是我只能显示第二个分区而不能第二次触发jquery脚本来显示第三个分区.

下面是我的Jquery和html.

$(document).ready(function(){
		for(i=2;i<=5;i++)
		{
			$("#"+i).hide();
		}
		i=2; /* degrade the value of i */

		$("button").on("click",function(){
			//alert(i);
			$("#button").remove();
			$("#"+i).show();
			var button="show  more";
			$("#"+i).after(button);
			i=i+1;
		});
	});

	
	


	

		

		show more
		

		

		

		

	
  

$(":hidden").first().show()

$(function () {
  $("p:not(:first)").hide();
  $("a").click(function (e) {
    e.preventDefault();
    $("p:hidden").first().show();
  });
});

* {margin: 0; padding: 0; list-style: none; line-height: 1;}
p {display: inline-block; padding: 5px; border: 1px solid #ccc;}

Paragraph 1
Paragraph 2
Paragraph 3
Paragraph 4
Paragraph 5
Show