JSFiddle - React, Tailwind, and code Playground

HTML

<p class="title">Please <span class="show-selector dashed">select</span> upcoming event</p>

CSS

.dashed {
    border-bottom: 1px dashed;
    cursor: pointer;
}
.busy {
    border-bottom: 0 none;
    cursor: default;
}
#upcoming-events select {
    width: 10em;
}
.title {
    margin-bottom: 0.5em;
}
.list dt {
    font-weight: bold;
    margin-bottom: 0.5em;
}
.list dd {
    margin-left: 2em;
    margin-bottom: 1em;
}

JavaScript

$(function() {
    $("span.show-selector").bind("click", function() {
        var ele = $(this),
            select;

        if (ele.hasClass("busy")) {
            return;
        }
        ele.addClass("busy");

        select = buildSelect();
        updateList(select);

        select.always(function() {
            ele.removeClass("busy");
        });
    });
});

function updateList(select) {
    select.done(function(upcomingEvent) {
        var list = $("dl.list");

        if (!list.length) {
            list = $('<dl class="list"></dl>').appendTo("body");
        }

        list.append('<dt>' + upcomingEvent.name + '</dt>' + '<dd>' + upcomingEvent.description + '</dd>');
    });
}

function fetchEvents() {
    var jqXHR = $.ajax({
        url: "http://query.yahooapis.com/v1/public/yql",
        data: {
            q: 'select * from upcoming.events where tags="birthday"',
            format: 'json'
        },
        dataType: 'jsonp'
    });

    return jqXHR;
}

function buildSelect() {

    var select = $.Deferred(),
        fetcher = fetchEvents();

    fetcher.done(function(data) {
        var ele = [],
            cache = {};

        $.each(data.query.results.event, function(index, upcomingEvent) {
            ele.push('<option value="' + upcomingEvent.id + '">');
            ele.push(upcomingEvent.name);
            ele.push('</option>');
            cache[upcomingEvent.id] = upcomingEvent;
        });

        $("p.title").append('<div id="upcoming-events"><select>' + ele.join('') + '</select><button class="btn-done">Done</button><button class="btn-cancel">Cancel</button></div>');

        $("#upcoming-events").delegate("button", "click", function() {
            var upcomingEvent;

            if ($(this).hasClass("btn-done")) {
                upcomingEvent = cache[$("#upcoming-events select").val()];
                select.resolve(upcomingEvent);
            } else if ($(this).hasClass("btn-cancel")) {
                select.reject("user");
 ...