JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<table class="runes left"></table>
<div class="rune-calc right">
    <div class="quint-container"></div>
    <div class="mark-container"></div>
    <div class="seal-container"></div>
    <div class="glyph-container"></div>
</div>

CSS

html, body {
    height:100%;
    background-color:#F7F7F7;
    background-size:cover;
    background-repeat:none;
    background-position:center;
}
* {
    margin:0;
    padding:0;
    font-size:12px;
    font-weight:400;
}
* .left {
    float:left;
}
* .right {
    float:right;
}
* .center {
    margin:auto auto;
}
* a {
    font-family:inherit;
    font-size:inherit;
    font-weight:inherit;
    text-decoration:none;
    color:inherit;
}
img, p {
    cursor:default;
}
table.runes {
    width:300px;
    border-collapse: collapse;
}
table.runes tr:nth-child(odd) {
    background: -webkit-linear-gradient(#F7F7F7, #FFF);
    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#F7F7F7, #FFF);
    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#F7F7F7, #FFF);
    /* For Firefox 3.6 to 15 */
    background: linear-gradient(#F7F7F7, #FFF);
    /* Standard syntax */
    border:1px solid rgba(204, 204, 204, 0.5);
    border-bottom:none;
}
table.runes tr:nth-child(even) {
    background:#FFF;
    border:1px solid rgba(204, 204, 204, 0.5);
    border-top:none;
}
table.runes tr td:nth-child(2) {
    padding-left:5px;
}
table.runes tr td.index, table.runes tr td.type {
    display:none;
}
table.runes tr td.icon {
    cursor:pointer;
}
table.runes tr td.entry-name {
    font-weight:bold;
    cursor:pointer;
}
table.runes tr td.entry-desc {
    padding-bottom:5px;
    font-style:italic;
    cursor:default;
}
table.runes tr td.entry-name, table.runes tr td.entry-desc {
    padding-left:5px;
    padding-right:5px;
}
div.rune-calc {
    width:calc(100% - 362px);
    min-height:10px;
    margin:25px 25px 0;
    padding:5px;
    background:#FFF;
    border:1px solid rgba(204, 204, 204, 0.5);
}
div.rune-calc div.quint-container, div.rune-calc div.mark-container, div.rune-calc div.seal-container, div.rune-calc div.glyph-container {
    display:inline-block;
    padding:5px;
}
div.rune-calc div.rune {
    width:48px;
    height:48px;
    background:red...

JavaScript

$(document).ready(function () {
    //create table
    $.getJSON("http://ddragon.leagueoflegends.com/cdn/4.14.2/data/en_US/rune.json", function (response) {
        console.log(response.data);
        $.each(response.data, function (index, entry) {
            var $name = entry.name;
            var type = NaN;
            if ($name.indexOf('mark') != -1 || $name.indexOf('Mark') != -1) {
                type = "Mark";
            } else if ($name.indexOf('seal') != -1 || $name.indexOf('Seal') != -1) {
                type = "Seal";
            } else if ($name.indexOf('glyph') != -1 || $name.indexOf('Glyph') != -1) {
                type = "Glyph";
            } else if ($name.indexOf('quint') != -1 || $name.indexOf('Quint') != -1) {
                type = "Quint";
            };
            $('table.runes').append('<tr><td class="index">' + index + '</td><td class="type">' + type + '</td><td class="icon"> \
					<div style="width:48px;height:48px;background:url(./assets/runes/rune0.png) -' + entry.image.x + 'px -' + entry.image.y + 'px no-repeat"> \
					</div></td><td class="entry-name">' + entry.name + '</td></tr> \
					<tr><td></td><td class="entry-desc">' + entry.description + '</td></tr>');
        });
    });

    //append runes
    jQuery("body").on("click", "td", function () {
        if ($(this).is('td.entry-name') || $(this).is('td.icon')) {
            var getText = $(this).siblings('td.index').text();
            var getType = $(this).siblings('td.type').text();
            console.log(getText); //ID Check
            $.getJSON("http://ddragon.leagueoflegends.com/cdn/4.14.2/data/en_US/rune.json", function (response) {
                $.each(response.data, function (index, entry) {
                    if (index == getText) {
                        console.log(entry.name); //Name Check
                        if (getType == "Mark") {
                            $('div.mark-container').append('\
								<div class="rune"...