両サイドに縦のナビゲーションをカレント表示させたいです

HTML等で初めてサイトを制作している者です。
縦書きのナビゲーションを画面の両サイドに配置し、スクロールした際に現在地を示すカレント表示をさせていと思っています。
カレント表示は下記の画像のように現在地を赤文字で表示したいと思っております。

問題点
下記のようなコードを記述したのですが、左のナビゲーションがカレント表示されないことに悩んでおります。
（右のナビゲーションは理想通り機能しています。)
こちら解決策などございましたら、ご教授お願い致します。

Html
1    <div class="side side-right">
2        <nav class="side-nav">
3            <ul class="side-nav-list">
4                <li class="top-of-side"><a href="#top" id="top_link_js">top</a></li><!--非表示--->
5                <li><a href="#about" id="about_link_js">About</a></li>
6                <li><a href="#menu" id="menu_link_js">Menu</a></li>
7                <li><a href="#access" id="access_link_js">Access</a></li>
8                <li><a href="#contact" id="contact_link_js">Contact</a></li>
9            </ul>
10        </nav>
11    </div>
12    
13    
14    <div class="side side-left">
15        <nav class="side-nav">
16            <ul class="side-nav-list">
17                <li class="top-of-side"><a href="#top" id="top_link_js">top</a></li><!--非表示--->
18                <li><a href="#about" id="about_link_js">About</a></li>
19                <li><a href="#menu" id="menu_link_js">Menu</a></li>
20                <li><a href="#access" id="access_link_js">Access</a></li>
21                <li><a href="#contact" id="contact_link_js">Contact</a></li>
22            </ul>
23        </nav>
24    </div>
25    
26
27
28
29    　　<script>
30        $(function() {
31            var set = 200; //ウインドウ上部からどれぐらいの位置で変化させるか
32            var boxTop = new Array;
33            var current = -1;
34            //各要素の位置
35            //position-nowは場所を取得したい対象の要素に付ける
36            $('.position-now').each(function(i) {
37                boxTop[i] = $(this).offset().top;
38            });
39            //最初の要素にclass="positiion-now"をつける
40            changeBox(0);
41            //スクロールした時の処理
42            $(window).scroll(function() {
43                scrollPosition = $(window).scrollTop();
44                for (var i = boxTop.length - 1; i >= 0; i--) {
45                    if ($(window).scrollTop() > boxTop[i] - set) {
46                        changeBox(i);
47                        break;
48                    }
49                };
50            });
51            //ナビの処理
52            function changeBox(secNum) {
53                if (secNum != current) {
54                    current = secNum;
55                    secNum2 = secNum + 1; //以下にクラス付与したい要素名と付与したいクラス名
56                    $('.side-nav li a').removeClass('link-current');
57
58                    //位置によって個別に処理をしたい場合　
59                    if (current == 0) {
60                        $('#top_link_js').addClass('link-current');
61                        // 現在地がsection1の場合の処理
62                    } else if (current == 1) {    
63                        $('#about_link_js').addClass('link-current');
64                        // 現在地がsection1の場合の処理
65                    } else if (current == 2) {
66                        $('#menu_link_js').addClass('link-current');
67                        // 現在地がsection2の場合の処理
68                    } else if (current == 3) {
69                        // 現在地がsection3の場合の処理
70                        $('#access_link_js').addClass('link-current');
71                    } else if (current == 4) {
72                        // 現在地がsection4の場合の処理
73                        $('#contact_link_js').addClass('link-current');
74                }
75            };
76        });
77        $(function() {
78            $('a[href^="#"]').click(function() {
79                var adjust = -20;
80                var speed = 500;
81                var href = $(this).attr("href");
82                var target = $(href == "#" || href == "" ? 'html' : href);
83                var position = target.offset().top + adjust;
84                $("html, body").animate({
85                    scrollTop: position
86                }, speed, "swing");
87                return false;
88            });
89        });
90    </script>
91
92    
93    <!---コンテンツ--->
94    <div class="about position-now" id="about">
95        <p>about</p>
96    </div>
97    <div class="menu position-now" id="menu">
98        <p>Menu</p>
99    </div>
100    <div class="access position-now" id="access">
101        <p>Access</p>
102    </div>
103    <div class="contact position-now" id="contact">
104        <p>Contact</p>
105    </div>
106
107
108

css
1/*---サイドナビゲーション---*/
2.side-right {
3    position: fixed; /* 画面に固定して追従させます */
4    top: 20vh; /* 表示画面の上から20%のところから表示を始めます */
5    right:0; /* 固定位置は右側 */
6    z-index:1; /* 他の要素より前に出します */
7    margin: auto 10px;
8}
9
10
11.side-left {
12    position: fixed; /* 画面に固定して追従させます */
13    top: 20vh; /* 表示画面の上から20%のところから表示を始めます */
14    left:0; /* 固定位置は右側 */
15    z-index:1; /* 他の要素より前に出します */
16    margin: auto 10px;
17    transform: rotateZ(180deg);
18}
19
20
21.side li{
22    font-size: 15px;
23    font-weight: 400;
24    margin: 15px 0;
25    margin-right: 50px;
26}
27
28.top-of-side{
29    display: none;
30}
31
32.side-right li a{
33    -webkit-writing-mode: vertical-rl; /* Chrome,Safari対応*/
34    -ms-writing-mode: tb-rl; /* IE対応*/
35    writing-mode: vertical-rl;
36}
37
38.side-left li a{
39    -webkit-writing-mode: vertical-rl; /* Chrome,Safari対応*/
40    -ms-writing-mode: tb-rl; /* IE対応*/
41    writing-mode: vertical-rl;
42}
43
44.side li a:hover {
45    color:#d7113d;
46}
47
48
49.link-current {
50    color:#d7113d;
51}
52/*---サイドナビゲーションここまで---*/