JSFiddle - React, Tailwind, and code Playground

HTML

<div id="output"></div>

JavaScript

$(function(){
    var myData=[];
    var seed = 100;
    
    for(j=1;j<=3;j++)
    {
        // create dummy data
        var id1 = (j * seed) + 1;
        var tmpData1 = {id:id1, displayName:(id1 +'s name')};
        var id2 = (j * seed) + 2;
        var tmpData2 = {id:id2, displayName:(id2 +'s name')};
        var id3 = (j * seed) + 3;
        var tmpData3 = {id:id3, displayName:(id3 +'s name')};
        
        var dummySvcData = [tmpData1, tmpData2, tmpData3];
        getData(myData, dummySvcData);
    }
    
    printData(myData);

});

function getData(myData, dataIn){
    $.each(dataIn, function( index, value ) {  
        myData.push(value);
    });
    
    $.each(myData, function( index, value ) {  
        // create some dummy events and artists
        var elementId = myData[index].id;
        var eventArr = [elementId + 's event1', elementId + 's event2'];
        var artistArr = [elementId + 's artist1', elementId + 's artist2'];
        getUpEvents(value, eventArr, artistArr);
    });
}

function getUpEvents(myDataElement, eventArr, artistArr){
    myDataElement['displayNameEvent'] = eventArr;
    myDataElement['displayNameArtist'] = artistArr;
}

function printData(myData){
    var results = $("#output");
    $.each(myData, function( index, value ) {  
        
        var htmlData = "<p>";
        htmlData += "<strong>";
        htmlData += myData[index].displayName;
        htmlData += "</strong>";
        htmlData += "<br/>";
        htmlData += myData[index].displayNameEvent.join(', ');
        htmlData += "<br/>";
        htmlData += myData[index].displayNameArtist.join(', ');
        htmlData += "<br/>";
        htmlData += "</p>";
        
        results.append(htmlData);
    });
}