JSFiddle - React, Tailwind, and code Playground

HTML

<div id="builddeck">
<table class="wikitable smwtable">


<tr>
<td>3
</td>
<td><a href="/wiki/Cards/Dancing_Cut" title="Cards/Dancing Cut">Dancing Cut</a>
</td>
<td>2
</td>
<td><a href="/wiki/Cards/Chop" title="Cards/Chop">Chop</a>
</td>
<td>1
</td>
<td><a href="/wiki/Cards/Backbiting_Strike" title="Cards/Backbiting Strike">Backbiting Strike</a>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>Backbiting Strike
</td>
<td>
</td>
<td>Chop
</td>
<td>Attack
</td>
<td>Dancing Cut
</td>
<td>Hybrid
</td></tr>
<tr>
<td>1
</td>
<td><a href="/wiki/Cards/Muscle_Through" title="Cards/Muscle Through">Muscle Through</a>
</td>
<td>1
</td>
<td><a href="/wiki/Cards/Sprint" title="Cards/Sprint">Sprint</a>
</td>
<td>1
</td>
<td><a href="/wiki/Cards/Thick_Hide_Armor" title="Cards/Thick Hide Armor">Thick Hide Armor</a>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>Muscle Through
</td>
<td>Movement
</td>
<td>Sprint
</td>
<td>Movement
</td>
<td>Thick Hide Armor
</td>
<td>Hybrid
</td></tr>
<tr>
<td>3
</td>
<td><a href="/wiki/Cards/Strong_Chop" title="Cards/Strong Chop">Strong Chop</a>
</td>
<td>2
</td>
<td><a href="/wiki/Cards/Chop" title="Cards/Chop">Chop</a>
</td>
<td>1
</td>
<td><a href="/wiki/Cards/Weak_Chop" title="Cards/Weak Chop">Weak Chop</a>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>Chop
</td>
<td>Attack
</td>
<td>Strong Chop
</td>
<td>Hybrid
</td>
<td>Weak Chop
</td>
<td>Attack
</td></tr>
<tr>
<td>1
</td>
<td><a href="/wiki/Cards/Spiked_Mail" title="Cards/Spiked Mail">Spiked Mail</a>
</td>
<td>1
</td>
<td><a href="/wiki/Cards/Mail" title="Cards/Mail">Mail</a>
</td>
<td>1
</td>
<td><a href="/wiki/Cards/Reliable_Hide_Armor" title="Cards/Reliable Hide Armor">Reliable Hide Armor</a>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>Mail
</td>
<td>Armor
</td>
<td>Reliable Hide Armor
</td>
<td>Armor
</td>
<td>Spiked...

CSS

ul#chdeck { list-style-type:none; list-style-image:none; }

JavaScript

//$("div").find("#builddeck").each(binddeck);
$("#builddeck" + " table.smwtable").each(deckGen);

function deckGen(){
    $(this).each(function () {
        var list = $("<ul/>");
        var typelist = $("<ul/>").attr('id','chtypes');
        var rowCount=$(this).find('tr').length;
        var colCount=12;
        $(this).find('tr').each(function() {
            $(this).find('td').each(function() {
                if ($(this).children().is('a')) {
                    var valThis = $(this).text();
                    var valThiscount = parseInt($(this).prev().text());
                    var myRow = $(this).closest('tr').index();
                    for (var i = myRow+1; i < rowCount; i++) {
                        for (var j = 0; j < colCount; j++) {
                            var listSel = $(this).closest('table').find('tr').eq(i).find('td').eq(j);
                            if ($(listSel).children().is('a')){
                                var listVal = $(listSel).text();
                                if (listVal === valThis){
                                    var listValCount = parseInt($(listSel).prev().text()); 
                                    valThiscount+=listValCount;
                                    $(listSel).html("");
                                }
                            }
                        }
                    }
                    var p = $(this).map(function () {
                        if ($(this).html()!=null){
                            var thiscolCount = $(this).closest('tr').find('td').length;
                            for (var y = 12; y < thiscolCount; y+=2) {
                                var ctype = $(this).closest('tr').find('td').eq(y);
                                if (ctype.text()===$(this).text()){
                                    var type=$("<span/>").attr('id','ctype');
                                    if (ctype.next().text().trim()!=""){
                                       ...