JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapperblock">
    <div id="epresults"></div>
</div>

CSS

.wrapperblock {
    margin-top: 20px;
    height: 100px;
    margin: 0 auto;
    border: 1px solid red;
    overflow: hidden;
}

#epresults {
    border: 1px solid green;
    height: auto;    
}
.tile {
    background: yellow;
    width: 200px;
    height: auto;
}
.namer, .namergray {
    color: black;
    width: auto;
    height: auto;
    font-family: ariel, helvetica, sans-serif;
    font-size: 1.0em;
    font-weight: bold;
}

JavaScript

$(document).ready(function () {
    //main ajax call to populate the menu  
    $.ajax({
        dataType: 'json',
        data: [{
            "name": "Joe Smith"
        }, {
            "name": "Bill Martin"
        }, {
            "name": "Susan Scott"
        }],
        success: function (data) {
            $.each(data, function(key) {
                alert("The key is: "+ key);
                var myname = data[key].name;
                $("#epresults").append("<div class='inner"+[key]+" namer'>"+myname+"</a></div>");
                $(".inner" + [key] + "").wrapAll("<div id='item" + [key] + "' class='tile ditem" + [key] + "' />"); //build the tile
                $("div#item" + [key]).wrap("<a class= 'ditem" + [key] + "' href='#' />"); //wrap the tile in a link
            });
        },
        error: function (xhr, desc, err) {
            console.log(xhr);
            console.log("Details: " + desc + "\nError:" + err);
        }
    });
    $("#epresults").show();

    $(" a ").click(function () {
        alert("Hello");
    });
});