JSFiddle - React, Tailwind, and code Playground

by Jaganathan

HTML

<form name='marksallotment'>
<div id="form2">
<table border="0">
<tr>
<td>i.&nbsp;&nbsp;&nbsp;&nbsp;
<input type="hidden" value="0" name="10" id="10">
<input type="button" class="button-low"  value="0">
<input type="hidden" value="2" name="12" id="12">
<input type="button" class="button-high" value="2">
</td>
</tr>
<tr>
<td>ii.&nbsp;&nbsp;&nbsp;
<input type="hidden" value="0" name="10" id="10">
<input type="button" class="button-low"  value="0">
<input type="hidden" value="2" name="12" id="12">
<input type="button" class="button-high" value="2">
</td>
</tr>
<tr>
<td>iii.&nbsp;&nbsp;
<input type="hidden" value="0" name="10" id="10">
<input type="button" class="button-low"  value="0">
<input type="hidden" value="2" name="12" id="12">
<input type="button" class="button-high" value="2">
</td>
</tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td><input type="hidden" value="0" class="total-hidden" />Total : <input type="text" size="5" value="0" class="total" /></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr>
<td>
<center>
<input type="submit" name="submit" id="submit" value="Submit">
</center>
</td>
</tr>
</table>
</div>
</form>

JavaScript

$('.button-low').on('click', function() {
    if(!$(this).data('clicked')){
    $(event.target).css('color', 'red');
    $('.total').val($('.total').val() === "0" ? 0 : parseInt($('.total').val(),10) - 2);
    $('total-hidden').val($('.total').val());
    $(this).data('clicked',true );
    }
});

$('.button-high').on('click', function() {
    if(!$(this).data('clicked')){
    $(event.target).css('color', 'red');
    $('.total').val(parseInt($('.total').val(),10) + 2);
    $('total-hidden').val($('.total').val());
        $(this).data('clicked',true );
    }
});