JS: Up/Down

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"},
      {"r": 10.50, "f" : "10.50"},
      {"r": 10.75, "f" : "10.75"},
      {"r": 11.00, "f" : "11.00"},
      {"r": 11.25, "f" : "11.25"},
      {"r": 11.50, "f" : "11.50"},
      {"r": 11.75, "f" : "11.75"},
      {"r": 12.00, "f" : "12.00"},
      {"r": 12.25, "f" : "12.25"},
      {"r": 12.50, "f" : "12.50"}
    ],
    "down": [
    	{"r": 7.50, "f" : "7.50"},
        {"r": 7.75, "f" : "7.75"},
        {"r": 8.00, "f" : "8.00"},
        {"r": 8.25, "f" : "8.25"},
        {"r": 8.50, "f" : "8.50"},
        {"r": 8.75, "f" : "8.75"},
        {"r": 9.00, "f" : "9.00"},
        {"r": 9.25, "f" : "9.25"},
        {"r": 9.50, "f" : "9.50"},
        {"r": 9.75, "f" : "9.75"} 
    ]
};

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

$btns.on('click', function(event) {
    var dir = $(event.currentTarget).data('dir');
    
    if(dir === 'up') {
/*use return; to stop or reset counter = -1 | 0*/
dir = counter >= -1 ? 'up' : 'down';
if(!prices[dir][counter+1])counter = -1;
counter++;
 console.log(prices[dir][counter]);  
    }
    
    if(dir === 'down') {
/*use return; to stop or reset counter = -1 | 0*/
dir = counter <= 0 ? 'down' : 'up';
if(!prices[dir][counter-1])counter = prices[dir].length-1;
counter--;
 console.log(prices[dir][counter]);
        
    }
});