JSFiddle - React, Tailwind, and code Playground

by Jayendra

HTML

<aside id="shows"class="aside shadow">
<div class="text" id="table">
<div class="more low"> MORE SHOWS </div>
<div class="less"> LESS SHOWS </div>
</div>
</aside>

JavaScript

var xml = "<shows><show><date>9/8</date><place>Toads Place</place><location>New Haven, CT</location><time>9PM</time></show></shows>"

$(document).ready(function(){
    $('#table').append('<h2>SHOWS</h2>'); 
    $('#table').append('<table id="show_table">'); 
    $(xml).find('show').each(function(){
        var $show = $(this);
        var date = $show.find('date').text();
        var place = $show.find('place').text();
        var location = $show.find('location').text();
        var time = $show.find('time').text();
        var html = '<tr><td class="bold">' + date + '</td><td class="hide">' + place + '</td><td>' + location + '</td><td class="bold">' + time + '</td></tr>';
        $('#show_table').append(html);
    });
    alert($('#show_table').html());
})