JSFiddle - React, Tailwind, and code Playground

by tjerabek

HTML

<div class="counter">
    <div class="c-item hours-1"><span class="value">1</span>
    </div>
    <div class="c-item hours-0"><span class="value">5</span>
    </div>
</div>
<a href="#" class="add-hour">Add hour</a>

CSS

.counter div {
    display: block;
    width: 2.5em;
    height: 3em;
    text-align: right;
    float: left;
    background:red;
    margin-right: 1px;
    overflow: hidden;
}
.value {
    display: block;
    width: .5em;
    padding: 1em;
    height: 1em;
    -webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}

JavaScript

var move0 = 0;
var move1 = 0;
$(document).on('click', '.add-hour', function () {
    var l = $('.counter').find('.c-item').length;

    var actualValue = parseInt($('.hours-0').find('.value').last().text());
    var nextValue = actualValue + 1;
    if (nextValue == 10) {
        nextValue = 0;

        var actualValue1 = parseInt($('.hours-1').find('.value').last().text());
        var nextValue1 = actualValue1 + 1;
        move1 -= 3;
        $('.hours-1').append('<span class="value">' + nextValue1 + '</span>');
        $('.hours-1').find('.value').first().css('margin-top', move1 + 'em');
    }
    move0 -= 3;
    $('.hours-0').append('<span class="value">' + nextValue + '</span>');
    $('.hours-0').find('.value').first().css('margin-top', move0+'em');
    return false;
});