【Firebase(Realtime Database)】ボタンをクリックして、並び替えの切り替えができる機能を実装したい。

前提・実現したいこと

初心者です。
FirebaseのRealtime Databaseを利用して、簡単なチャットを作成しています。
ボタンクリックで切り替わる並び替え機能を追加したく、調べて実装してみました。
現在は、古い順から3件表示することができています。並び替えのボタンをクリックすると、新しい順から3件のみ表示されるようにしたいです。

発生している問題・エラーメッセージ

並び替えのボタンをクリックすると、古いメッセージ3件＋新しいメッセージ3件が表示されてしまいます。クリックした分だけ、新しいメッセージ3件が追加されていきます。
新しいメッセージのみ3件表示させたいのですが。。

該当のソースコード

jQuery
1 
2  //　イベントハンドラを登録(初期表示:古い日付からの3件のみ表示)
3  roomRef.orderByKey().limitToFirst(3).on('child_added', (childSnapshot) => {
4    if (roomName === currentRoomName) {
5      // 追加されたメッセージを表示
6     
7      addMessage(childSnapshot.key, childSnapshot.val());
8    }
9  });
10
11  
12  // 「新しい日付から表示」をクリックすると、最新3件を表示
13  $('.recent_days').on('click', () => {
14    
15　　roomRef.off('child_added');
16   
17    window.location.reload();
18    
19    roomRef.orderByKey().limitToLast(3).on('child_added', (childSnapshot) => {
20      if (roomName === currentRoomName) {
21      // 追加されたメッセージを表示
22      
23        addMessage(childSnapshot.key, childSnapshot.val());
24      }
25    });
26  });