How to make it so that when clicking on one element, the value of some parameter of the other changes, i.e. added, for example, every time?

Question

JavaScript

It is necessary that when clicking on .arrow-next-timelineeach time, some value is added to the parameter lefty .overflow-timeline>div
Wrote something like this, but something is not right ...

$('.arrow-next-timeline').on('click', function(){
    var i = $('.overflow-timeline>div').css('left');
    i += 100;
    $('.overflow-timeline>div').css('left', i + 'px'); 
});

Here is a simplified example (working): jsfiddle.net/timofeev/tgb7bb7g/2
And here is an attempt to do what is written above: jsfiddle.net/timofeev/tgb7bb7g/3

Answer 1

var left = 0;

$('.first').on('click', function () {
    left++;
    $('.second')[0].style.left = left + 'px';
});

Answer 2

Try like this

var i = parseInt($('.overflow-timeline>div').css('left'));