JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
	<table class="masteries" border="1">
		<tr class="p0">
			<td><p><span>0</span>/1</p></td>
			<td><p><span>0</span>/4</p></td>
			<td><p><span>0</span>/4</p></td>
			<td><p><span>0</span>/1</p></td>
			
			<td><p><span>0</span>/2</p></td>
			<td><p><span>0</span>/2</p></td>
			<td><p><span>0</span>/2</p></td>
			<td><p><span>0</span>/2</p></td>
			
			<td><p><span>0</span>/1</p></td>
			<td><p><span>0</span>/3</p></td>
			<td><p><span>0</span>/3</p></td>
			<td><p><span>0</span>/1</p></td>
		</tr>
</table>

JavaScript

$('document').ready(function() {
    $('table.masteries tr.p0 td').click(function() {
        if(!this.i){
            this.i = 0;
        }
		s = $(this).find('p').text()
		current_max = parseInt(s.substr(s.length - 1))
		if (
			$(this).is($(':nth-child(1)'))
			|| $(this).is($(':nth-child(2)'))
			|| $(this).is($(':nth-child(3)'))
			|| $(this).is($(':nth-child(4)'))
		) {
            this.i = this.i+1
			console.log(this.i)
			$(this).closest('span').append(this.i);
		} else if (
			$(this).is($(':nth-child(5)'))
			|| $(this).is($(':nth-child(6)'))
			|| $(this).is($(':nth-child(7)'))
			|| $(this).is($(':nth-child(8)'))
		) {
			
		} else if (
			$(this).is($(':nth-child(9)'))
			|| $(this).is($(':nth-child(10)'))
			|| $(this).is($(':nth-child(11)'))
			|| $(this).is($(':nth-child(12)'))
		) {
		
		}
	});
});