JSFiddle - React, Tailwind, and code Playground
HTML
<div class="nota left">
<label>NOTA:</label>
<input type="text" value="0,0" maxlength="3" class="maskNota" />
<!-- Controladores -->
<a href="#" class="nota-mais" title="Aumentar nota">+</a>
<a href="#" class="nota-menos" title="Diminuir nota">-</a>
</div>
JavaScript
// Botões de mais/menos nota
var notaMais = $('.nota-mais'),
notaMenos = $('.nota-menos');
// Nota mais
notaMais.click(function(n){
n.preventDefault();
var pai = $(this).parents()[0],
inputNota = $('.maskNota', pai),
notaVal = inputNota.val().replace(',','.'),
notaVal = parseFloat(notaVal) + parseFloat(0.1),
notaVal = notaVal.toFixed(1);
if (notaVal >= 10) {
inputNota.attr('value', '10');
}
else {
inputNota.attr('value', notaVal.replace('.',','));
}
});
// Nota menos
notaMenos.click(function(b){
b.preventDefault();
var pai = $(this).parents()[0],
inputNota = $('.maskNota', pai),
notaVal = inputNota.val().replace(',','.'),
notaVal = parseFloat(notaVal) - parseFloat(0.1),
notaVal = notaVal.toFixed(1);
if (notaVal <= 0) {
inputNota.attr('value', '0,0');
}
else {
inputNota.attr('value', notaVal.replace('.',','));
}
});