jQueryを使って、アンケートの回答を同一IDでFirebaseに格納したいのですが…

色々サイトも調べてみたのですが、意外と同様のQAも見当たりませんでした…
難しいのはアンケートフォームに記載したテキストではなく、
押したbuttonの中のテキストを抽出→ 複数回答を
まとめてfirebaseに格納する機能です。

1.jQueryで複数のアンケート（2択×４ページ）を1ページずつ表示し
2.その後、question1〜4でクリックされたボタンのみテキストを抽出し
3.Firebaseに保存

したいのですが、
丸２日格闘しているものの、うまくいかず困っています（｀・ω・´;）
（そもそも不格好なコードでお恥ずかしいですが…）

HTML
1<div id="questions">
2    <div id="question1">    
3      <p>あなたはどっち派？</p>
4      <button id="btn1" class="btn1" value="">インドア派</button>
5      <button id="btn2" class="btn1" value="">アウトドア派</button>
6    </div>
7    <div id="question2">    
8      <p>あなたはどっち派？</p>
9      <button id="btn3" class="btn2" value="">楽観的</button>
10      <button id="btn4" class="btn2" value="">悲観的</button>
11    </div>
12    <div id="question3">    
13      <p>あなたはどっち派？</p>
14      <button id="btn5" class="btn3" value="">挑戦的</button>
15      <button id="btn6" class="btn3" value="">安定的</button>
16    </div>
17    <div id="question4">    
18      <p>あなたはどっち派？</p>
19      <button id="btn7" class="btn4" value="">リーダー型</button>
20      <button id="btn8" class="btn4" value="">サポーター型</button>
21    </div>
22  </div>
23
24<div id="send">結果を送信</div>

javascript
1
2$(function() {
3
4  $('#btn1,#btn2').click(function() {
5      $('#question1').animate({opacity: 0}, 500,function(){
6      $('#question1').css('display','none');
7      $('#question2').css('display','block');
8      $('#question2').animate({opacity: 1}, 1000);  
9    });
10  });
11  $('#btn3,#btn4').click(function() {
12      $('#question2').animate({opacity: 0}, 500,function(){
13      $('#question2').css('display','none');
14      $('#question3').css('display','block');
15      $('#question3').animate({opacity: 1}, 1000);  
16    });
17  });
18  $('#btn5,#btn6').click(function() {
19      $('#question3').animate({opacity: 0}, 500,function(){
20      $('#question3').css('display','none');
21      $('#question4').css('display','block');
22      $('#question4').animate({opacity: 1}, 1000);  
23    });
24  });
25  $('#btn7,#btn8').click(function() {
26      $('#question4').animate({opacity: 0}, 500,function(){
27      $('#question4').css('display','none');
28      $('#send').css('display','block');
29      $('#send').animate({opacity: 1}, 1000);  
30    });
31  });
32});
33
34
35const database = firebase.database().ref();
36
37$(function() {
38
39    $('.btn1').on('click', function(){
40      var personality_1 =  $(this).attr("value");
41      return(personality_1);
42    });
43    $('.btn2').on('click', function(){
44        var personality_2 =  $(this).attr("value");
45        return(personality_2);
46    });
47    $('.btn3').on('click', function(){
48        var personality_3 =  $(this).attr("value");
49        return(personality_3);
50    });
51    $('.btn4').on('click', function(){
52        var personality_4 =  $(this).attr("value");
53        return(personality_4);
54    });
55    $("#send").on("click",function(){
56      database.push({
57      per01:personality_1,
58      per02:personality_2,
59      per03:personality_3,
60      per04:personality_4,
61    });
62  });
63});

みなさまのお知恵をお貸しください。
どうぞ宜しくおねがいします★

2KOH

2019/11/10 08:00

質問内容が不明瞭なのですが、「jQueryで複数のアンケート（2択×４ページ）を1ページずつ表示する方法と、question1〜4でクリックされたボタンのみテキストを抽出する方法と、Firebaseに保存する方法を教えて下さい」ということでしょうか。それは質問ではなく丸投げといいます。

退会済みユーザー

2019/11/10 09:19

2KOHさんご返答ありがとうございます！＾＾すでに「Queryで複数のアンケート（2択×４ページ）を1ページずつ表示する方法」はできておりまして…、ただ、４つのアンケートを最後まとめて、Firebaseにpush（格納）したいのですが、ここがどうしても実装できずにおります。一つひとつのアンケートを別々のIDで格納することはできるんですが、同一IDにて行うことが苦戦しております。2KOHさんは、おわかりになりますでしょうか？

2KOH

2019/11/10 09:58

質問内容に、わかっていることは何か、わからないことや聞きたいことは何かを明記するようにしてください。また、Firebaseに格納する方法がわからないというのであれば、jQuery とかボタンのテキストの抽出とかは無関係です。無関係なものは質問内容からすべて除外し、Firebaseに格納する方法だけを尋ねる内容で質問し直してください。ちなみに、私は Firebase を触ったことがないため、Firebase に関しては答えられません。