JSFiddle - React, Tailwind, and code Playground
HTML
<table class="bracket"> <colgroup> <col class="large"/> <col class="medlarge"/> <col class="medlarge"/> <col class="medlarge"/> </colgroup> <thead> <tr><th>Round 1 (1 Point)</th><th>Round 2 (2)</th><th>Round 3 (4)</th><th>Div Final (8)</th></tr> </thead> <tbody> <tr><th colspan="4">Division 1</td></tr> <tr> <td id="battle_1" class="complete"> <span class="battle_info">Battle 1</span> <i id="char_1" class="fa fa-question-circle" onclick="show_char_info(1);"></i> (1) <span id="b1-1" title="Dante" class="picked"><a onclick="pick( 1, 1)">Dante</a></span><br> <i id="char_2" class="fa fa-question-circle" onclick="show_char_info(2);"></i> (16) <span id="b1-2" title="Cuphead" class="not_picked"><a onclick="pick( 1, 2)">Cuphead</a></span><br> </td> <td rowspan="2" id="battle_65" class="complete"> <span class="battle_info">Battle 65</span> <span id="b65-1" class="picked"><a onclick="pick( 65, 1)">Dante</a></span><br> <span id="b65-2" class="not_picked"><a onclick="pick( 65, 4)">Lightning</a></span><br> </td> <td rowspan="4" id="battle_97" class="complete"> <span class="battle_info">Battle 97</span> <span id="b97-1" class="not_picked"><a onclick="pick( 97, 1)">Dante</a></span><br> <span id="b97-2" class="picked"><a onclick="pick( 97, 7)">Ganondorf</a></span><br> </td> <td rowspan="8" id="battle_113" class="complete"> <span class="battle_info">Battle 113</span> <span id="b113-1" class="not_picked"><a onclick="pick( 113, 7)">Ganondorf</a></span><br> <span id="b113-2" class="picked"><a onclick="pick( 113, 9)">Vivi</a></span><br> </td> </tr> <tr> <td id="battle_2" class="complete"> <span class="battle_info">Battle 2</span> <i id="char_3" class="fa fa-question-circle" onclick="show_char_info(3);"></i> (8) <span id="b2-1" title="Chloe Price" class="not_picked"><a onclick="pick( 2, 3)">Chloe Price</a></span><br> <i id="char_4" class="fa fa-question-circle" onclick="show_char_info(4);"></i> (9) <span id="b2-2" title="Lightning" class="picked"><a onclick="pick( 2,...