JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<table>
    <tr>
        <td>Pitching: Kyle Farnsworth</td>
        <td><button id="button1">Switch Stats</button></td>
    </tr>
    <tr>
        <td colspan="2">
            <div id="layer1" class="stats">One set of stats go in here, wrapped in a table if need be</div>
            <div id="layer2" class="stats">Another set id stats go in here, also wrapped in a table if necessary</div>
        </td>
    </tr>
</table>

CSS

table { width: 100%; }
#layer1 { background-color: green; }
#layer2 { background-color: red; display:none; }
.stats {padding: 10px; }

JavaScript

$('#button1').click(function() {
    $('#layer1, #layer2').toggle();
});