JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="eventList">
</ul><div id="details">this div</div>

CSS

body {
    font: normal 13px Verdana;
    padding: 20px;
}

#eventList {
    list-style-type: none;
    margin: 0;
}

#eventList a {
  display: block;
  border: 1px solid #000080;
  background-color: #cce2ff;
  margin-bottom: 4px; 
  width: 130px;
  height: 16px;
  padding: 10px;
  cursor: pointer;    
}

JavaScript

$(function() {
    var getJSON = function() {
        return [
            { EventID: 1, EventName: 'Lunch', Location: 'Kitchen', Date: '3/24/2012' },
            { EventID: 2, EventName: 'Party', Location: 'Ballroom', Date: '3/31/2012' },
            { EventID: 3, EventName: 'Hike', Location: 'Woods', Date: '3/26/2012' },
            { EventID: 4, EventName: 'Lecture', Location: 'Auditorium', Date: '4/1/2012' }
        ];
    };
    
    var openEvent = function(event) {
        alert(event.EventName + '\n' + event.Location + '\n' + event.Date);
        var details = $('#details');
        details.replaceWith('hello');
    };
    
    (function(data) {
        var list = $('#eventList');
        $.each(data, function(index, item) {
            $('<a>')
                .data('event', item)
                .bind('click', function() { openEvent($(this).data('event')); })
                .text(item.EventName)
                .appendTo($('<li>').appendTo(list));
        });        
    })(getJSON());
});