Next и prev в меню

Есть меню, есть кнопки управления next и prev. Идея такая: при клике на пункт меню срабатывает определенное событие (например, фильтрация на клиенте) + сам пункт становится активным. При клике на next событие срабатывает на элементе, который следует сразу за активным пунктом и этот следующий пункт становится активным.
При клике на prev событие срабатывает на элементе, который находится перед активным пунктом и этот предыдущий пункт становится активным. Все это зациклено.

Пример здесь, реализация на jquery: https://codepen.io/Ilinykh/pen/MPGBXK

Проблема в следующем:

Если сначала выбрать пункт по клику на него, а потом начать нажимать на кнопки, то происходит рассинхрон и срабатывает не тот пункт, который должен срабатывать. На примере все должно быть понятно, прошу помочь.

 $(function(){
var $nav = $('.list'),
            $menuLink = $('.list').find('li a'),
            $currentItem = $menuLink.find('.active'),
            $prevBtn = $('.prev-btn'),
            $nextBtn = $('.next-btn');
  $menuLink.on('click', function () {
            $menuLink.removeClass('active');
            $(this).addClass('active');
        })
  $prevBtn.on('click', function (event) {
            event.preventDefault();
            event.stopImmediatePropagation();
            $nextBtn.removeClass('active');
            $(this).addClass('active');
            $currentItem = ($currentItem > 0) ? $currentItem - 1 :       $menuLink.length - 1;
            $menuLink.eq($currentItem).addClass('active');
            $menuLink.eq($currentItem).trigger('click');
        })

  $nextBtn.on('click', function (event) {
            event.preventDefault();
            event.stopImmediatePropagation();
            $prevBtn.removeClass('active');
            $(this).addClass('active');
            $currentItem = ($currentItem + 1 < $menuLink.length) ?       $currentItem + 1 : 0;
            $menuLink.eq($currentItem).addClass('active');
            $menuLink.eq($currentItem).trigger('click');
        })

});