Simple custom javascript scroller

Question

I need to list some titles. Only 6 of them should be visible at one time. I'm not allowed to use any external library. Everything works fine except if I click down to scroll list down and than click up, the list scrolls up only after the second click.

I understand that the problem is in my global variables that holds list positions and functions, but I can't understand why do they get updated only after second click, not the first one!

Would appreciate your help and please consider that I'm only learning JS at the moment.

html part

       <div class="mailOptions">
        <div class="incProducts">
          <h3>Include Products</h3>
          <div class="moveOptUp"><span>UP</span></div>
          <nav class="allMailOptions">
            <div class="mailOpt" id="mailOpt_1">
              <span class="optWithMarks"></span>
              <span class="mailOptName">1 abcdefg</span>
              <span class="optMarked"></span>
            </div>
            <div class="mailOpt" id="mailOpt_2">
              <span class="optWithMarks"></span>
              <span class="mailOptName">2 abcdefg</span>
              <span class="optMarked"></span>
            </div>
            <div class="mailOpt" id="mailOpt_3">
              <span class="optWithMarks"></span>
              <span class="mailOptName">3 abcdefg</span>
              <span class="optMarked"></span>
            </div>
            <div class="mailOpt" id="mailOpt_4">
              <span class="optWithMarks"></span>
              <span class="mailOptName">4 abcdefg</span>
              <span class="optMarked"></span>
            </div>
            <div class="mailOpt" id="mailOpt_5">
              <span class="optWithMarks"></span>
              <span class="mailOptName">5 abcdefg</span>
              <span class="optMarked"></span>
            </div>
            <div class="mailOpt" id="mailOpt_6">
              <span class="optWithMarks"></span>
              <span class="mailOptName">6 abcdefg</span>
              <span class="optMarked"></span>
            </div>
            <div class="mailOpt hide" id="mailOpt_7">
              <span class="optWithMarks"></span>
              <span class="mailOptName">7 abcdefg</span>
              <span class="optMarked"></span>
            </div>
            <div class="mailOpt hide" id="mailOpt_8">
              <span class="optWithMarks"></span>
              <span class="mailOptName">8 abcdefg</span>
              <span class="optMarked"></span>
            </div>
            <div class="mailOpt hide" id="mailOpt_9">
              <span class="optWithMarks"></span>
              <span class="mailOptName">9 abcdefg</span>
              <span class="optMarked"></span>
            </div>
          </nav>
          <div class="moveOptDown"><span>DOWN</span></div>
        </div>
      </div>

js part

    var targetOptTop = 1;
var targetOptDown = 7;
var targetOptLast = ($(".allMailOptions").children().length);


$('#popUpMail ').click(function(e) {
    event.preventDefault();
    //$('#popUp').removeClass('hide');
    $('.popUpEmail').addClass('show');
});

$('.cntrl-discard').click(function() {
    $('.popUpEmail').removeClass('show');
});

$('.mailOpt').click(function() {
    var id = ($(this).attr('id'));
    var idCheckBox = id.split("_");
    var idCheckBox = idCheckBox[1];

    $('.mailOpt').removeClass('activeOpt');
    $(this).addClass('activeOpt');

    $('.allIncQuotes').addClass('hide');
    $('#checkBl_' + idCheckBox).removeClass('hide');
});

function scrollMailDown(position) {
    console.log(targetOptTop);
    console.log(targetOptDown);

    if (targetOptDown < targetOptLast+1) {
        $('.mailOpt:nth-child(' + targetOptTop + ')').addClass('hide');
        $('.mailOpt:nth-child(' + targetOptDown + ')').removeClass('hide');
        targetOptTop += position;
        targetOptDown += position;
    };
};

function scrollMailUp(position) {
    console.log(targetOptTop);
    console.log(targetOptDown);

    if (targetOptTop >= 1) {
        $('.mailOpt:nth-child(' + targetOptTop + ')').removeClass('hide');
        $('.mailOpt:nth-child(' + targetOptDown + ')').addClass('hide');
        targetOptTop += position;
        targetOptDown += position;
    };
};

$('.moveOptDown').click(function() {
    scrollMailDown(+1);
});

$('.moveOptUp').click(function() {
    scrollMailUp(-1);
});

jsFiddle http://jsfiddle.net/A1ex5andr/qxHT5/1/

Answer 1

You need to decrement your counters before you remove your classes like this:

function scrollMailUp(position) {
    console.log(targetOptTop);
    console.log(targetOptDown);
        targetOptTop--;
        targetOptDown--;
    if (targetOptTop >= 1) {

        $('.mailOpt:nth-child(' + targetOptTop + ')').removeClass('hide');
        $('.mailOpt:nth-child(' + targetOptDown + ')').addClass('hide');

    };
};

here is your fiddle