簡単なメモ張(自作の初心者向けのプログラミング辞書)を作成していますが、自分で入力したものの出力がわかりません。

(やりたいこと)
・メモ張をつくっています。
・自分で(タイトル)と(内容)を入力。その後、生成されたボタンを押したら出力部分に内容が表示
※ファイルは3つ目まではあらかじめ配列を置いてます。4つ目からが自分で追加する部分です。

→つまり(関数)(配列)(オブジェクト)までは配列を置いています。

(わからないこと)
入力部分に(タイトル)(内容)の情報をいれたあと、生成されるボタンを押したら出力され、それがどんどん追加されるようにしたい。

javascript
1jQuery(function () {
2    // ↓ここから記述
3
4    // 【 配列の定義】
5    // 
6    var list=[
7        '関数とは',
8        '配列とは・・・',
9        'オブジェクトとは・・・',
10
11    ]
12
13    var list2=[
14        '関数',
15        '配列',
16        'オブジェクト'
17    ]
18
19    console.log(list[0]);
20    console.log(list);
21    console.log(list.length);
22
23    console.log(list2[2]);
24
25    // ここから出力欄(上段)
26
27    $('#select1').on('click',function(){
28       $('#text_area').html(list[0]);
29    });
30
31    $('#select2').on('click',function(){
32        $('#text_area').html(list[1]);
33     });
34
35     $('#select3').on('click',function(){
36        $('#text_area').html(list[2]);
37     });
38    
39    
40
41     $('#aaa').on('click',function(){
42        $('#text_area').html(list[3]);
43     });
44
45
46
47     $('#select4').on('click',function(){
48        $('#text_area').html(list[3]);
49     });
50
51     $('#select5').on('click',function(){
52        $('#text_area').html(list[4]);
53     });
54
55     $('#select6').on('click',function(){
56        $('#text_area').html(list[5]);
57     });
58
59     $('#select7').on('click',function(){
60        $('#text_area').html(list[6]);
61     });
62
63     $('#select8').on('click',function(){
64        $('#text_area').html(list[7]);
65     });
66 
67    //【クリアボタンの設置】
68
69    $('#clear').on('click',function(){
70        $('#text_area').val('');
71    });
72
73    //入力ボタン
74    $('#input').on('click',function(){    
75        //1.ボタンの追加
76    $('#select').append('<button id="'  + $('#title').val() +  '">' + $('#title').val() + '</button>');
77        //2.各種定義
78        var code =$('#text_area2').val();
79
80        //3.配列への追加&Localstorageへの追加
81        list.push(code);
82        localStorage.setItem('name',list);
83        console.log(list);
84
85        var input_title = $('#title').val();
86        list2.push(input_title);
87
88        localStorage.setItem('title',list2);
89        console.log(list2)
90
91        //4.
92});
93
94
95
96    // //ここから入力欄(下段)※トライ中
97
98    // $('#select4').on('click',function{
99    //     //新規登録
100    //     if(link[4] == 'undefined'){
101    //         var code = $('#text_area2').val();
102    //         list.push(code); //配列に追加
103    //             // list.push(code);
104    //         localStorage.setItem('name',list); //localstorageに追加
105    //          console.log(list);
106    //             // localStorage.setItem(code);
107            
108    //         //2タイトルの保存の処理
109    //         var title = $('#title').val();
110    //         list2.push(title); //title配列に追加
111    
112    //         localStorage.setItem('title',list2) //localstorageに追加
113    //         console.log(list2)
114    //         $('#select5').html(title);
115    //     }else if(){
116    //         //出力
117    //         $('#text_area').html(list[4]);
118    //     }else if(){
119
120    //     }
121
122
123    // });
124
125
126
127        //コードの入力
128    // $('#input').on('click',function(){
129    //     //1コードの保存の処理
130    //     var code = $('#text_area2').val();
131    //     list.push(code);
132    //         // list.push(code);
133    //     localStorage.setItem('name',list);
134    //      console.log(list);
135    //         // localStorage.setItem(code);
136        
137    //     //2タイトルの保存の処理
138    //     var title = $('#title').val();
139    //     list2.push(title);
140
141    //     localStorage.setItem('title',list2)
142    //     console.log(list2)
143    //     $('#select4').html(title);
144        
145    //     //完了の通知
146    //     alert('保存しました');
147
148
149
150    // });
151
152
153
154    // ↑ここまでに記述
155});
156
157

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <meta http-equiv="X-UA-Compatible" content="ie=edge">
8    <title>list</title>
9</head>
10
11<body>
12
13
14
15
16
17<!-- ボタン部分 -->
18<h2>検索(出力)</h2>
19<div class="siraberu">
20    <div id="select">
21        <p>調べたい項目のボタンを押してください</p>
22        <button name="q" id="select1">関数</button>
23        <button name="q" id="select2">配列</button>
24        <button name="q" id="select3">オブジェクト</button>
25        <!-- <button name="q" id="select4">未登録</button>
26        <button name="q" id="select5">未登録</button> -->
27    </div>
28
29
30
31    <input type="text" id="num">
32    <button id="select">表示</button>
33
34</div>
35<!-- 入力部分 -->
36
37<div class="gedan">
38
39    <div class="nyuuryoku">
40        <h2>追加登録(入力)</h2>
41        <input type="text" id="title" placeholder='タイトルを入力してください'>
42        <textarea name="" id="text_area2" cols="30" rows="10" placeholder='ここに登録したいコードを入力してください'></textarea>
43        <button id="input">登録</button>
44    </div>
45
46
47    <div class="syutsuryoku">
48        <h2>出力部分</h2>
49        <textarea placeholder='ここに説明が表示されます' name="" id="text_area" cols="30" rows="10"></textarea>
50        <div id="view">
51
52            <button id="clear" class="clear">クリア</button>
53        </div>
54    </div>
55</div>
56    <script src="js/jquery-2.1.3.min.js"></script>
57    <script src="js/list.js"></script>
58</body>
59
60</html>
61
62