html - Increase and decrease value in Pure Javascript -

i'm trying develop simple carousel pure javascript , css. i'm having trouble "next" , "previous" button, since should communicate each other, setting current position of carousel.

here current code (or jsfiddle: https://jsfiddle.net/kbumjlw2/1/):

// slider    var listrecommendations = document.getelementbyid('list-recommendations');  listrecommendations.style.left = 0;    // previous button  document.getelementbyid("btn-prev").onclick = function() {    // making sure functions not run if it's 0px of slider    if (parseint(listrecommendations.style.left) != 0) {      var currentposition = parseint(listrecommendations.style.left) + 100;      listrecommendations.style.left = currentposition + 'px';      console.log(currentposition);    };  }    // next button  var num = 100;  var maxvalue = 1000 + 120;  console.log(maxvalue);    document.getelementbyid("btn-next").onclick = function() {    if (num < maxvalue) {      num += 100;      listrecommendations.style.left = '-' + num + 'px';      console.log(num);    };  }

#list-recomendations{    position: absolute;  }    .wrap-items .item{    float: left;  }

<div class="recommendation">    <div id="slider">      <div id="list-recommendations" class="wrap-items">        <div class="item">1</div>        <div class="item">2</div>        <div class="item">3</div>        <div class="item">4</div>        <div class="item">5</div>        <div class="item">6</div>        <div class="item">7</div>        <div class="item">8</div>        <div class="item">9</div>        <div class="item">10</div>      </div>    </div>      <!-- slider controls -->			    <button id="btn-prev" class="btn-slider prev">previous</button>    <button id="btn-next" class="btn-slider next" title="ver mais sugestões">next</button>  </div>

as can see on console, next button increases "100" @ each click, , previous button decreases "100" @ each click. previous button seems working fine, next button don't updated value, increase using latest value used.

expected result:

next button clicked: 100 > 200 > 300...

prev button clicked: 200 > 100 > 0...

next button clicked: 100 > 200 > 300...

current result:

next button clicked: 100 > 200 > 300...

prev button clicked: 200 > 100 > 0...

next button clicked: 400 > 500 > 600...

any idea on may causing issue?

check updated fiddle

// previous button     document.getelementbyid("btn-prev").onclick = function() {         // making sure functions not run if it's 0px of slider             var currentposition = parseint(listrecommendations.style.left) - 100;             listrecommendations.style.left = currentposition + 'px';             console.log(currentposition);     }      // next button     var num = 100;     var maxvalue = 1000 + 120;     console.log(maxvalue);      document.getelementbyid("btn-next").onclick = function() {         if (num < maxvalue) {             var currentposition = parseint(listrecommendations.style.left) + 100;             num = currentposition;             listrecommendations.style.left =  num + 'px';             console.log(num);         };     } 

you need take left value each time , plus (+ next) minus (- prev) on it.