JSFiddle - React, Tailwind, and code Playground

by Dan Vassallo

HTML

<table>
    <tr>
        <td>
            <b>User Score</b>
            <p class="uscore">0</p>
            <button id="inc-us">INC USER SCORE</button>
        </td>
        <td>
            <b>Enemy Score</b>
            <p class="escore">0</p>
            <button id="inc-es">INC ENEMY SCORE</button>
        </td>
        <td>
            <b>Round Counter</b>
            <p class="rounds">1</p>
            <button id="inc-rc">INC ROUND COUNTER</button>
        </td>
    </tr>
</table>

CSS

td{
    text-align: center;
}

JavaScript

var uScore = 0;
var eScore = 0;
var roundCounter = 1;

$('#inc-us').on('click', function(){
    uScore++
	$('.uscore').html(uScore);
});

$('#inc-es').on('click', function(){
    eScore++
	$('.escore').html(eScore);
});

$('#inc-rc').on('click', function(){
    roundCounter++
	$('.rounds').html(roundCounter);
});