JS: Up/Down

by kyllle

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
<div>
    <button class="btn btn-success btn-block  js-btn" data-dir="up">Up</button>
    <button class="btn btn-danger btn-block  js-btn" data-dir="down">Down</button>
</div>

SCSS

* {
  -webkit-font-smoothing: antialiased;
}

body {
    padding: 5%;
}

JavaScript

console.clear();

var prices = {
    "up": [{
            "r": 10.25,
            "f": "10.25"
        }, //0
        {
            "r": 10.50,
            "f": "10.50"
        }, //1
        {
            "r": 10.75,
            "f": "10.75"
        }, //2
        {
            "r": 11.00,
            "f": "11.00"
        }, //3
        {
            "r": 11.25,
            "f": "11.25"
        }, //4
        {
            "r": 11.50,
            "f": "11.50"
        }, //5
        {
            "r": 11.75,
            "f": "11.75"
        }, //6
        {
            "r": 12.00,
            "f": "12.00"
        }, //7
        {
            "r": 12.25,
            "f": "12.25"
        }, //8
        {
            "r": 12.50,
            "f": "12.50"
        } //9
    ],
    "down": [{
            "r": 7.50,
            "f": "7.50"
        }, //0
        {
            "r": 7.75,
            "f": "7.75"
        }, //1
        {
            "r": 8.00,
            "f": "8.00"
        }, //2
        {
            "r": 8.25,
            "f": "8.25"
        }, //3
        {
            "r": 8.50,
            "f": "8.50"
        }, //4
        {
            "r": 8.75,
            "f": "8.75"
        }, //5
        {
            "r": 9.00,
            "f": "9.00"
        }, //6
        {
            "r": 9.25,
            "f": "9.25"
        }, //7
        {
            "r": 9.50,
            "f": "9.50"
        }, //8
        {
            "r": 9.75,
            "f": "9.75"
        } //9
    ]
};

var $btns = $('.js-btn');
var counter = -1;

$btns.on('click', function(event) {
    var dir = $(event.currentTarget).data('dir');

    if (dir === 'up') {
        if (counter >= prices[dir].length - 1) {
            console.log('REQUEST `UP` PRICES');
            return;
        };

        counter++;
        console.log('UP', counter);

        if (counter >= -1) {
            console.log(prices[dir][counter]);
        } else {
           ...