Scroll to next or previous elements

Question

I have a scroller that contains max 3 elements and has down arrow to go down to next elements and up arrow to go back to previous elements but i'm having trouble making it work.

Here is snippet of html:

<div class="mob-keys-container" id="mob-keys-container">
    <img id="mob-icon-up" src="./images/mob-up-btn.png" alt="down" width="40px">
     <div id="icon-container">
        <img class="answerIcon mobIcon active" draggable="true" id="answer_1_mob" src="./images/5.1.png" alt="key">
        <img class="answerIcon mobIcon active" draggable="true" id="answer_2_mob" src="./images/5.2.png" alt="key">
        <img class="answerIcon mobIcon active" draggable="true" id="answer_3_mob" src="./images/5.3.png" alt="key">
        <img class="answerIcon mobIcon active" draggable="true" id="answer_4_mob" src="./images/5.4.png" alt="key">
        <img class="answerIcon mobIcon active" draggable="true" id="answer_5_mob" src="./images/5.5.png" alt="key">
        <img class="answerIcon mobIcon active" draggable="true" id="answer_6_mob" src="./images/5.6.png" alt="key">
     </div>
    <img id="mob-icon-down" src="./images/mob-down-btn.png" alt="down" width="40px">
 </div>

and here is JQuery:

$('#mob-icon-down').on('click', () => {
// finds visible elements(max 3)
        let $visible = $('.mobIcon:visible');
// finds first element
        let $firstVisible = $visible.first();
// finds last element
        let $lastVisible = $visible.last();
// find next element
        let $nextVisible = $lastVisible.next();
// hides scroller arrow if there are less than 3 elements
        if ($visible.length < 3) {
            $('#mob-icon-down').hide();
        } else {
            $firstVisible.hide();
            $nextVisible.show();
        }

    })

    $('#mob-icon-up').on('click', () => {
// finds visible elements(max 3)
        let $visible = $('.mobIcon:visible');
// finds first element
        let $firstVisible = $visible.first();
// finds last element
        let $lastVisible = $visible.last();
// finds element before the first
        let $prevVisible = $firstVisible.prev();
// hides scroller arrow if there are less than 3 elements
        if ($visible.length < 3) {
            $('#mob-icon-up').hide();
        } else {
            $lastVisible.hide();
            $prevVisible.show();
        }

    })

The corresponging arrows should disappear when there are no next/previous elements and reappear if this changes but it's a mess right now and element count breaks after it hits a wall and all that is left are no elements and no arrows.

Answer 1

// move up
function up() {
    //all currently active elements
  let $active = $('.image.active');
  // last active element
  let $last = $active.last();
  // element before those in the list
  let $prev = $active.prev();
  // remove active class from last/bottom element 
  $last.removeClass('active');
  // add active class to previous element
  $prev.addClass('active');
  check();
}

function down() {
    // exactly as up() just in the other direction
  let $active = $('.image.active');
  let $first = $active.first();
  let $next = $active.next();
  $first.removeClass('active');
  $next.addClass('active');
  check();
}

function check() {
    // all image elements
    let $images = $('.image');
  let $active = $('.image.active');
  let $first = $active.first();
  let $last = $active.last();
    // if the last element is the last image, disable the down button
  if($last.index() === $images.length - 1) {
    $('#moveDown').attr('disabled', true);
  }else{
  // otherwise, enable it
    $('#moveDown').attr('disabled', false);
  }
  
  // if the first active element is the first image, disable the up button
  if($first.index() === 0) {
    $('#moveUp').attr('disabled', true);
  }else{
  // otherwise enable it
    $('#moveUp').attr('disabled', false);
  }
}

function init(elementsToShow ) {
  // set active class on the first 3 elements
  $('.image').slice(0, elementsToShow).addClass('active');
  // set the up Button to disabled
  $('#moveUp').attr('disabled', true);
}

$(document).ready(function() {
    // init the container with max number of elments to show
  init( 3 );
})

.btn-group {
  background: #F1F1F1;
  border-bottom: 1px solid #CECECE;
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding: 10px;
  position: fixed;
  top: 0;
  left: 0;
}

.container {
  margin-top: 70px;
  padding: 10px;
  border-bottom: 2px solid #333;
}

.image {
  width: 100%;
  height: 100px;
  background: red;
  border: 1px solid white;
  display: none;
}

.image.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group">
  <button onClick="down()" id="moveDown">
    DOWN
  </button>
  <button onClick="up()" id="moveUp">
    UP
  </button>
</div>
<div class="container">
  <div class="image"><h1>1</h1></div>
  <div class="image"><h1>2</h1></div>
  <div class="image"><h1>3</h1></div>
  <div class="image"><h1>4</h1></div>
  <div class="image"><h1>5</h1></div>
  <div class="image"><h1>6</h1></div>
  <div class="image"><h1>7</h1></div>
  <div class="image"><h1>8</h1></div>
  <div class="image"><h1>9</h1></div>
  <div class="image"><h1>10</h1></div>
</div>