JSFiddle - React, Tailwind, and code Playground

by ArchersFiddle

HTML

<table id="myTable">
    <tr class="head">
        <th></th>
        <th>New York</th>
        <th>Chicago</th>
        <th>San Francisco</th>
    </tr>
    <tr>
        <th>BLABLA</th>
        <td>Sat, 4 Feb 2012<br />11am - 2pm</td>
        <td>Sat, 3 Mar 2012<br />11am - 2pm</td>
        <td>Sat, 17 Mar 2012<br />11am - 2pm</td>
    </tr>
</table>

JavaScript

var eventsJson='{"events":{"event":[{"id":"1","name":"A Poetic Perspective","isFree":"true","locations":[{"location":"New York","eventDate":"2015-05-02","eventTime":"14:00"},{"location":"Chicago","eventDate":"2015-05-01","eventTime":"14:00"},{"location":"San Francisco","eventDate":"2015-06-01","eventTime":"15:00"}],"descr":"Vivamus elementum, diam eget ullamcorper fermentum, ligula libero euismod massa, quis condimentum tellus lacus sit."},{"id":"2","name":"Walt Whitman at War","isFree":"false","locations":[{"location":"New York","eventDate":"2015-07-02","eventTime":"14:00"},{"location":"Chicago","eventDate":"2015-07-01","eventTime":"14:00"},{"location":"San Francisco","eventDate":"2015-08-01","eventTime":"15:00"}],"descr":"Donec convallis eu metus eget dictum. Etiam non lobortis dui."},{"id":"3","name":"Found Poems & Outsider Poetry","isFree":"false","locations":[{"location":"New York","eventDate":"2015-06-02","eventTime":"11:00"},{"location":"Chicago","eventDate":"2015-07-01","eventTime":"14:00"},{"location":"San Francisco","eventDate":"2015-06-01","eventTime":"15:00"}],"descr":"Ut fermentum, elit vel iaculis viverra, dui libero ultrices nibh, ut ornare."},{"id":"4","name":"Natural Death: An Exploration","isFree":"true","locations":[{"location":"New York","eventDate":"2015-05-02","eventTime":"14:00"},{"location":"Chicago","eventDate":"2015-05-01","eventTime":"14:00"},{"location":"San Francisco","eventDate":"2015-06-01","eventTime":"15:00"}],"descr":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquet urna ut tortor consequat."}]}}';

var data = JSON.parse(eventsJson);

function showEvent(id) {
    for (var i in data.events.event) {
        if (data.events.event[i].id == id) {
            var thisEvent = data.events.event[i];
            var head = "<tr class=\"head\"><th></ht>";
            var row = "<tr><th>" + thisEvent.name + "</th>";
            for (var l in thisEvent.locations) {
                var thisLocation =...