JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="main">
    <ul>
        <li><a href="#prev" class="scroll">PREV</a>

        </li>
        <li><a href="#next" class="scroll">NEXT</a>

        </li>
    </ul>
</nav>
<section id="secHead"><a id="anchortop"></a>HEAD</section>
<section id="secOne"><a id="anchorone"></a>ONE</section>
<section id="secTwo"><a id="anchortwo"></a>TWO</section>
<section id="secThree"><a id="anchorthree"></a>THREE</section>
<section id="secThree"><a id="anchorfour"></a>FOUR</section>
<section id="secThree"><a id="anchorfive"></a>FIVE</section>

CSS

section#secHead {
    background:#eee;
}
section#secOne {
    background:#d7d6c2;
}
section#secTwo {
    background:#f9f0e9;
}
section#secThree {
    background:#2eaeb7;
}
section#secFour {
    background:#ffe56c;
}
section#secFive {
    background:#a3c4c9;
}
nav#main {
    position:fixed;
    top:20%;
    right:0px;
    z-index:9999;
    width:10%;
}
/* I added #main to the selector of the active class */
 nav#main ul, nav#main ul li {
    padding:0;
    margin:0;
    list-style:none;
}
nav#main a:hover, nav#main li.active a {
    background: #ffae20;
    color:#000;
}
nav#main li.next a {
    background:red;
    color:#000;
}
nav#main a {
    margin:0;
    padding:15%;
    background: #000;
    display:inline-block;
    width:70%;
    overflow:hidden;
}

JavaScript

$(window).resize(function () {
    $('#secHead, #secOne, #secTwo, #secThree, #secFour, #secFive').height($(window).height());
});

$(window).trigger('resize');

$(document).ready(function () {
    var main = main = $('#main ul');
    var anchors = ['anchortop', 'anchorone', 'anchortwo', 'anchorthree', 'anchorfour', 'anchorfive'];
    var currentIdx = 0;

    $('.scroll').click(function (event) {

        event.preventDefault();

        var full_url = this.href,
            parts = full_url.split('#'),
            btn = parts[1];

        if (btn == 'prev' && currentIdx > 0) {
            currentIdx--;
        } else if (btn == 'next' && currentIdx < anchors.length - 1) {
            currentIdx++;
        }

        var trgt = anchors[currentIdx],
            target_offset = $('#' + trgt).offset(),
            target_top = target_offset.top;

        $('html, body').animate({
            scrollTop: target_top
        }, 500);

        /* Remove active class on any li when an anchor is clicked */

        main.children().removeClass();

        /* Add active class to clicked anchor's parent li */

        $(this).parent().addClass('active').next().addClass('next');

        /* My terrible attempt */

        $('.active a').text('PREV');
        $('.next a').text('NEXT');
    });
});