If you don't want use DB you can save the counters in window property, but the counters will lose if you refresh the page:
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<title>Grade Values</title>
<script type="text/javascript">
$(document).ready(function () {
window.A = 0;
window.B = 0;
window.C = 0;
window.D = 0;
$("#gradess").on('click', function() {
var value = $('#grades :selected').val();
if(value == "A") window.A++;
else if(value == "B") window.B++;
else if(value == "C") window.C++;
else if(value == "D") window.D++;
$("#A").html(window.A);
$("#B").html(window.B);
$("#C").html(window.C);
$("#D").html(window.D);
return false;
});
});
</script>
</head>
<body>
<div id="gradesS">
<select name="grades" id="grades">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<button type="submit" id="gradess">Submit</button>
</div>
<div id="result">
<table border="1"><tr><td>Grades</td><td>Frequency</td>
<tr><td> A</td><td id="A">0</td></tr>
<tr><td> B</td><td id="B">0</td></tr>
<tr><td> C</td><td id="C">0</td></tr>
<tr><td> D</td><td id="D">0</td></tr>
</table>
</div>
</body>
</html>