JSFiddle - React, Tailwind, and code Playground
HTML
<div class="form-group">
<div class="col-sm-9">
<input id="pre-execwait-min" value=0 size=2 data-bind="value: PreExecWaitMin" /> minutes
<input id="pre-execwait-sec" value=0 size=2 data-bind="value: PreExecWaitSec" /> seconds
</div>
</div>
JavaScript
var spinSeconds = function (event, ui, id) {
if (ui.value >= 60) {
$(this).spinner('value', ui.value - 60);
$("#"+id).spinner('stepUp');
return false;
} else if (ui.value < 0) {
$(this).spinner('value', ui.value + 60);
$("#"+id).spinner('stepDown');
return false;
}
}
$('#pre-execwait-sec').spinner({
spin: spinSeconds(event, ui, "pre-execwait-min"),
change: function(event, ui) {
$(event.target).trigger('change');
}
});
$('#pre-execwait-min').spinner({
min: 0,
change: function(event, ui) {
$(event.target).trigger('change');
}
});