JSFiddle - React, Tailwind, and code Playground

by seano666

HTML

<head>
    <title>Thing!</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        function genCell(fid, bid) {
            cellid = "matrix-"+fid+"-"+bid
            infield = "<input class='fishnum' type='text' name='"+cellid+"' />"
            return "<td class='fishnum' id='"+cellid+"'>"+infield+"</td>"
        }
        function addFish(id, name) {
            console.log('addFish: '+id+','+name)
            baits = []
            $("#fishtable").find("td[id|='bait']").each(function(){
                baitid = $(this).attr('id').split('-')[1]
                cellid = "matrix-"+id+"-"+baitid
                baits[baits.length] = genCell(id, baitid)
            })
            $("#fishtable").append(
                "<tr id='fish-"+id+"'><td><p class='sidelabel'>"+name+"</p></td>"+baits.join('')+"</tr>")
            console.log(baits.join(''))
        }
        function addBait(id, name) {
            console.log('addBait: '+id+','+name)
            $("#fishtableheader").append("<td id='bait-"+id+"'><p class='toplabel'>"+name+"</p></td>")
            $("#fishtable").find("tr[id|='fish']").each(function(){
                fishid = $(this).attr('id').split('-')[1]
                cellid = "matrix-"+fishid+"-"+id
                $(this).append(genCell(fishid, id))
            })
        }

        // these will generate the table just fine
        //$.getJSON("api/v1/bait.php", function(data){
        //$.each(data, function(key,val) {
        //addBait(key, val['name'])
        //})
        // })
        // $.getJSON("api/v1/fish.php", function(data){
        //$.each(data, function(key,val) {
        //addFish(key, val['name'])
        //})
        //})
        // these do nothing
        
        function test(){
            addBait(5, 'Spinning Lure')
            addBait(7, 'Chocobo Fly')
            addFish(4, 'Lamprey')
            addFish(6, 'Plaguefish')
        }

   ...