JSFiddle - React, Tailwind, and code Playground

by Ryan Brown

HTML

<div id="div1"> 
</div>

<select name="selectboxid" id="selectboxid" style="font-size: 20px;" onchange="onChangedValue()">
                <option value="0">Sidney Crosby</option>
                <option value="1">Dakbokkum</option>
                <option value="2">Deonjeongchigae</option>
                <option value="3">Jjuk</option>
                <option value="4">Kimchi</option>
                <option value="5">Mondu</option>
                <option value="6">Naengmyeon</option>
                <option value="7">Ohjingohchae</option>
                <option value="8">Pajeon</option>
            </select>

CSS

#mytable,td{
    border:1px solid blue;
}

JavaScript

var obj=[

    {  
        Name : "Player",
        Pos : "Position",
        Game : "Games Played",
        Goals : "Goals Scored",
        Assists : "Assists on Goals",
        Points: "Total Points"
    },
{
        Name : "Sidney Crosby",
        Pos : "C",
        Game : "3",
        Goals : "1",
        Assists : "4",
        Points: "5"
    },
    {
        Name : "Evgeni Malkin",
        Pos : "C",
        Game : "3",
        Goals : "1",
        Assists : "3",
        Points: " 4"
    },
    {
        Name : "Bryan Rust",
        Pos : "RW",
        Game : "3",
        Goals : "2",
        Assists : "1",
        Points : "4"
    },
    {
        Name : "Olli Maata",
        Pos : "D",
        Game : "3",
        Goals : "2",
        Assists : "1",
        Points : "3"
    },
    {
        Name : "Jake Guentzel",
        Pos : "C",
        Game : "3",
        Goals : "1",
        Assists : "2",
        Points : "3"
    },        
    {
        Name : "Phill Kessel",
        Pos : "RW",
        Game : "3",
        Goals : "1",
        Assists : "1",
        Points : "2"
    },
    {
        Name : "Ryan Reaves",
        Pos : "RW",
        Game : "3",
        Goals : "1",
        Assists : "0",
        Points : "1"
    },    
    {
        Name : "Creg McKegg",
        Pos : "C",
        Game : "3",
        Goals : "0",
        Assists : "1",
        Points : "1"
    },    
    {
        Name : "Conor Sheary",
        Pos : "LW",
        Game : "3",
        Goals : "1",
        Assists : "0",
        Points : "1"
    },    
    {
        Name : "Carl Hagelin",
        Pos : "LW",
        Game : "3",
        Goals : "0",
        Assists : "1",
        Points : "1"
    },    

]
var tbl=$("<table/>").attr("id","mytable");
$("#div1").append(tbl);
for(var i=0;i<obj.length;i++)
{
    var tr="<tr>";
    var td1="<td>"+obj[i]["Name"]+"</td>";
    var td2="<td>"+obj[i]["Pos"]+"</td>";
    var td3="<td>"+obj[i]["Game"]+"</td>";
   var...