I have an unordered list of numbers that scroll. The selected/middle list item needs to show in a yellow font color. I have applied a class toggle function to my scroll buttons. I just need help figuring out a solution that will stop the class toggle function when I get to my first and last list item.

The solution I need must allow for the addition and removal of list items without the need to adjust the JavaScript if possible.

As usual, I know this is light work for you guys. Any and all help is very much appreciated.

HTML

<div id="container">
  <div class="box">
    <ul id="ulscroller">
      <li value="22"> </li>
      <li id="1" class="active">1</li>
      <li id="2" class="target">2</li>
      <li id="3" class="active">3</li>
      <li id="4" class="target">4</li>
      <li id="5" class="active">5</li>
      <li value="21" class="lastitem"> </li>
    </ul>
  </div>
  <!--Button Controls-->
  <div class="buttholder">
    <a href="#">
      <button class="scrollup">UP</button>
    </a>

    <a href="#">
      <button class="buttok">OK</button>
    </a>

    <a href="#">
      <button class="scroll">Down</button>
    </a>
  </div>

CSS

.box li.target {
  color: #fff;
}

.box li.active {
  color: #fada15;
}

#container {
  position: relative;
  width: 310px;
  height: 268px;
  background: #000;
}

button {
  width: 72px;
  height: 72px;
  margin-top: 5px;
  margin-bottom: 5px
}

#container div {
  position: absolute;
}

ul li {
  font-size: 42px;
  color: #fff;
  overflow: hidden;
  font-family: arial;
  text-align: center;
}

li {
  list-style-type: none;
  margin-bottom: 30px;
  margin-top: 32px;
}

.box {
  border: 0px #00f solid;
  height: 247px;
  width: 199px;
  overflow: hidden;
}

#container div.buttholder {
  position: relative;
  float: right;
  border: 0px #0f0 solid;
  width: 72px;
  height: 236px;
  top: 11px;
  right: 13px;
}

.lastitem {height: 22px;}

JavaScript

$(document).ready(function() {
  $('.scroll').click(function() {
    $('li').toggleClass('active', 'target');
    $('.box').animate({
      scrollTop: '+=80'
    }, 100);
  });
});
$(document).ready(function() {
  $('.scrollup').click(function() {
    $('li').toggleClass('active', 'target');
    $('.box').animate({
      scrollTop: '-=80'
    }, 100);
  });
});

When toggleClass() has two parameters, the second parameter is expected to be a boolean (and not just truthy/falsy).

Therefore, 'target' is ignored in this code:

 $('li').toggleClass('active', 'target');

What you could do is set the first li as "active," then move the active class to the previous or next li, depending on which button is pressed.

If the next li is the last child, or the previous li is the first child, then don't move the active class.

Snippet

$(document).ready(function() {
  $('.scroll').click(function() {
    var current= $('li.active'),
        next= current.next().not(':last-child');

    if(next.length) {
      next.addClass('active');
      current.removeClass('active');
    }
    $('.box').animate({
      scrollTop: '+=80'
    }, 100);
  });

  $('.scrollup').click(function() {
    var current= $('li.active'),
        prev= current.prev().not(':first-child');

    if(prev.length) {
      prev.addClass('active');
      current.removeClass('active');
    }
    $('.box').animate({
      scrollTop: '-=80'
    }, 100);
  });
});

.box li.target {
  color: #fff;
}
.box li.active {
  color: #fada15;
}
#container {
  position: relative;
  width: 310px;
  height: 268px;
  background: #000;
}
button {
  width: 72px;
  height: 72px;
  margin-top: 5px;
  margin-bottom: 5px
}
#container div {
  position: absolute;
}
ul li {
  font-size: 42px;
  color: #fff;
  overflow: hidden;
  font-family: arial;
  text-align: center;
}
li {
  list-style-type: none;
  margin-bottom: 30px;
  margin-top: 32px;
}
.box {
  border: 0px #00f solid;
  height: 247px;
  width: 199px;
  overflow: hidden;
}
#container div.buttholder {
  position: relative;
  float: right;
  border: 0px #0f0 solid;
  width: 72px;
  height: 236px;
  top: 11px;
  right: 13px;
}
.lastitem {
  height: 22px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="box">

    <ul id="ulscroller">
      <li value="22"> </li>
      <li id="1" class="active">1</li>
      <li id="2">2</li>
      <li id="3">3</li>
      <li id="4">4</li>
      <li id="5">5</li>
      <li value="21" class="lastitem"> </li>
    </ul>
  </div>
  <!--Button Controls-->
  <div class="buttholder">
    <a href="#">
      <button class="scrollup">UP</button>
    </a>

    <a href="#">
      <button class="buttok">OK</button>
    </a>

    <a href="#">
      <button class="scroll">Down</button>
    </a>
  </div>