動的にクッキー名を保存し表示したいが、 1つのクッキーの値しか表示されない

＜実現したいこと＞
保存したクッキー名vstitle1の値とurl1の値を
順番にvstitle1が空じゃなかったら、値を表示させる
vstitle2が空じゃなかったら、値を表示させるを
vstitle4まで繰り返す

＜現在の問題点＞
動的に表示させたいため、
forでループさせているのですが、
表示はvstitle1のみしか表示されません。
デバックで確認したところ、
iが、クリックイベントが実行される時には常に4と表示されます。

クッキーを確認すると、値は、別のものが保存されていましたが、
表示はされないという状態です。

申し訳ありません、
何かご教授頂けたら大変助かります。

◆問題の箇所

javascript
1  // ④クッキー保存したデータを表示 //
2       function Title(){
3		var breakcunt = 4;
4  		for( i=0; i<4; i++ ){
5		if (getCookie('vstitle'+(i+1)) !=="" && getCookie('url'+(i+1)) !==""){
6			$("p.visit").append('<p class="vs0' +(i+1) +' "><a href="'+ getCookie('url'+(i+1)) +'">' + getCookie('vstitle'+(i+1)) +'</a><button id="Titlebtn' +(i+1) +' "><span>削除</span></button></p>');
7		$('#Titlebtn'+(i+1)).click(function (){
8			 	var i = 0;
9				console.log("'vstitle'+(i+1) =; max-age=0");
10				console.log("'url'+(i+1) =; max-age=0");
11				window.alert('削除');
12				 $("p.vs"(i+1)).remove();
13		}); 
14		breakcunt = i;
15		break ; 
16		}
17		}
18		if(breakcunt>3){
19			return "";
20		}
21		else{
22		}}
23

こちらがソース全文になります。

javascript
1
2<script type="text/JavaScript">
3            // ①クッキーの値を取得 getCookie(クッキー名); //
4        function getCookie(c_name) {
5            var st = "";
6            var ed = "";
7            if (document.cookie.length > 0) {
8                // クッキーの値を取り出す
9                st = document.cookie.indexOf(c_name + "=");
10                if (st != -1) {
11                    st = st + c_name.length + 1;
12                    ed = document.cookie.indexOf(";", st);
13                    if (ed == -1) ed = document.cookie.length;
14                    // 値をデコードして返す
15                    return unescape(document.cookie.substring(st, ed));
16                }
17            }
18            return "";
19        }
20
21   // ②クッキー保存　setCookie(クッキー名, クッキーの値, クッキーの有効日数); //
22        function setCookie(c_name, value, expiredays) {
23            // pathの指定
24            var path = location.pathname;
25            // pathをフォルダ毎に指定する場合のIE対策
26            var paths = new Array();
27            paths = path.split("/");
28            if (paths[paths.length - 1] != "") {
29                paths[paths.length - 1] = "";
30                path = paths.join("/");
31            }
32            // 有効期限の日付
33            var extime = new Date().getTime();
34            var cltime = new Date(extime + (60 * 60 * 24 * 1000 * expiredays));
35            var exdate = cltime.toUTCString();
36            // クッキーに保存する文字列を生成
37            var s = "";
38            s += c_name + "=" + escape(value);// 値はエンコードしておく
39            s += "; path=" + path;
40            if (expiredays) {
41                s += "; expires=" + exdate + "; ";
42            } else {
43                s += "; ";
44            }
45            // クッキーに保存
46            document.cookie = s;
47        }
48        // ④クッキー保存したデータを表示 //
49       function Title(){
50		var breakcunt = 4;
51  		for( i=0; i<4; i++ ){
52		if (getCookie('vstitle'+(i+1)) !=="" && getCookie('url'+(i+1)) !==""){
53			$("p.visit").append('<p class="vs0' +(i+1) +' "><a href="'+ getCookie('url'+(i+1)) +'">' + getCookie('vstitle'+(i+1)) +'</a><button id="Titlebtn' +(i+1) +' "><span>削除</span></button></p>');
54		$('#Titlebtn'+(i+1)).click(function (){
55			 	var i = 0;
56				console.log("'vstitle'+(i+1) =; max-age=0");
57				console.log("'url'+(i+1) =; max-age=0");
58				window.alert('削除');
59				 $("p.vs"(i+1)).remove();
60		}); 
61		breakcunt = i;
62		break ; 
63		}
64		}
65		if(breakcunt>3){
66			return "";
67		}
68		else{
69		}}
70	
71	 // ③クッキーにデータを保存 //
72    function TitleWrite() {
73		var breakcunt = 4;
74		for( i=0; i<4; i++ ){
75		if (getCookie('vstitle'+(i+1)) =="" && getCookie('url'+(i+1)) ==""){
76		breakcunt = i;
77		break ;
78		}
79		}
80		if(breakcunt>3){
81			window.alert('保存できません。');
82			return "";
83		}
84		else{
85		  setCookie('vstitle'+(breakcunt+1), $('.joblist_ttl').text(), 7);
86		  setCookie('url'+(breakcunt+1),$('.url').text(), 7);
87		  window.alert('保存しました。');
88		  Title();
89		}
90}
91$(function() {
92	 Title();
93});
94
95</script>
96