JSFiddle - React, Tailwind, and code Playground

by Taleeb Anwar

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="code_div">
    <div class="code_area active">
        <p id="number1">00</p>
    </div>
    <div class="code_area">
        <p id="number2">00</p>
    </div>
    <div class="code_area">
        <p id="number3">00</p>
    </div>
    <div class="code_area">
        <p id="number4">00</p>
    </div>
    <button id="plus" class="btn btn-primary btn-sm">plus</button>
    <button id="set_next" class="btn btn-primary btn-sm">Set Next</button>
    <button id="minus" class="btn btn-primary btn-sm">minus</button>

CSS

.active{
    background-color:yellow;
}

JavaScript

var value = 0;
var plus = false;
var minus = false;
$(document).ready(function () {

    $('#set_next').click(function () {
        if($('div.active').next('.code_area').length >0){
        $('div.active').removeClass('active').next().addClass('active');
        }
        else{
            $('div.active').removeClass('active');
            $('.code_area:first').addClass('active');
        }
    });

    $('#minus').click(function () {
value = parseInt($('div.active').text());
        minus = false;
        plus = true;
        if (plus == true) {
            value -= 5;
        }
        displayValue()

    });


    $('#plus').click(function () {
value = parseInt($('div.active').text());
        minus = true;
        plus = false;
        if (minus == true) {
            value += 5;
        }
        displayValue()

    });

});


function displayValue() {
if(value >= 0 && value<10){
            value = '0' + value;
        }
    $('div.active').text(value);

}