JSFiddle - React, Tailwind, and code Playground
HTML
<input value='0'> hours<br>
<button class='sub' data-num='15'>-15 min</button>
<button class='sub' data-num='5'>-5 min</button>
<button class='add' data-num='5'>+5 min</button>
<button class='add' data-num='15'>+15 min</button>
CSS
* {
font-size: 125%;
}
input {
text-align: center;
}
JavaScript
$(document).on('click', '.add', function(event) {
var input = $('input');
var inputVal = parseFloat($('input').val());
var addVal = parseFloat($(this).data('num'));
var newVal = inputVal + (addVal / 60);
$(input).val(newVal);
});
$(document).on('click', '.sub', function(event) {
var input = $('input');
var inputVal = parseFloat($('input').val());
var subVal = parseFloat($(this).data('num'));
var newVal = inputVal - (subVal / 60);
$(input).val(newVal);
});