JSFiddle - React, Tailwind, and code Playground

HTML

<div class="button" onclick="done('david',33,'john',44)">click</div>
<div class="info-holder"></div>
<div class="info"></div>

CSS

.info {
    display:none;
    background: rgba(0, 0, 0, .4);
    width: 400px;
    height: 100px;
    margin: 50px auto;
    padding: 15px;
}
.button {
    width: 40px;
    height: 20px;
    background:red;
    cursor:pointer;
}
.jj {
    width: 120px;
    height: 80px;
    background:gray;
    color:white;
    cursor:pointer;
}

JavaScript

function done() {
    for (var i=0, n=0, a=0, name = [], age = []; i<arguments.length; i++) {
        if (i % 2 === 0) {
            name[n] = arguments[i];
            n++;
        }
        if ((i+1) % 2 === 0) {
            age[a] = arguments[i];
            a++;
        }
    }
    for (var i=0; i<name.length; i++) {
        $(".info-holder").append("<div class='jj' id='"+i+"' >" + name[i] + "<div>");        
    }
    $(document).on("click", ".jj", function () {
        $('div.info').html('').hide();
        $('div.info').html('name: ' + name[this.id] + ' - age:' + age[this.id]);
        $('div.info').fadeIn();
    });
};