ブラウザの戻る・進むでjavascriptが中途半端に機能する

前提・実現したいこと

railsのアプリケーションに、カレンダー機能としてpickadate.jsを使用しているのですが、ブラウザの戻る・進むボタンでページ遷移した時に一部javascriptが正しく機能しません。

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

①リンクを踏んだ時の通常のページ遷移時

②ブラウザの戻る・進むボタンでページ遷移した場合

このように、javascriptで設定したはずの土曜日の部分のcssが機能していません。

該当のソースコード

javascript
1$(document).on('turbolinks:load', function() {
2  $(function() {
3    $(window).on("focus", function () { // これがないと画面に戻った時に勝手にカレンダーが表示される
4      $(document.activeElement).blur();
5    });
6
7    $('#schedule').pickadate({ // 選択できる最低限
8      min: 0
9    });
10
11    $('#time').pickatime({ // 時間について
12      format: 'HH:i', // 24時間表記
13        interval: 15,   // 表示間隔
14        min: [10,00],   // 予約開始時間
15        max: [20,00],    // 予約終了時間
16        clear: 'クリア',
17    });
18
19    $('#donation_day').pickadate({ // 選択できる最大限
20      max: 0
21    });
22
23    function css_add() { // ページロード時と左右の矢印を押した時に呼び出す関数
24      var sun = $('.picker__weekday:first'); // firstが日曜日
25      var sut = $('.picker__weekday:last') // lastが土曜日
26
27      sut.attr('id', 'sut')
28      sun.attr('id', 'sun')
29      // sut.attr('id', 'sut')
30
31      $('#sun').css({
32        'background-color': 'red',
33        'color': 'white'
34      });
35
36      $('#sut').css({
37        'background-color': 'blue',
38        'color': 'white'
39      });
40    }
41
42    css_add(); // ページロード時に呼び出し
43
44    $('.picker__holder').on("click", ".picker__nav--next, .picker__nav--prev", function() {
45      css_add();
46    });
47
48    // window.onpopstate = function (event) {
49    //   console.log("aaa");
50    //   css_add();
51    // };
52  });
53});

試したこと

コメントアウトしているところのwindow.onpopstateを試しましたが、console.logはブラウザの戻る・進むで機能しましたが、css_addの関数は同じように日曜日にしか適用されませんでした。

補足情報（FW/ツールのバージョンなど）

rails(5.2.3)
pickadate.js

shinji709

2019/11/30 11:01

参考にしたページはここですか？ https://qiita.com/hukuro310/items/5aca3cc10d28a26df00b もしそうなら補足情報に入れておいたほうがいいかもしれません。あとturbolinks使用時特有の動作かもしれませんし、タグにRuby on Railsも追加したほうが詳しい方の回答付きやすいと思います。