JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="details">

</div>
<div id="container">

</div>

JavaScript

$(function() {
 
 var onGetDetails = function(event){
		var id = event.target.dataset.personId,
    		el = jsonData.find(function(el){ 
    			return +el.id === +id;
    		});
        
        if(el){
        	var detailsString = `<div>Details here - ${el.surname} ${el.age}</div>`;
						$('#details').empty().append(detailsString);
        }
    
 },
 jsonData;
 
 
 $.getJSON('https://raw.githubusercontent.com/Steffzz/damnz/master/data.json', 
 function(data) {
            jsonData = jQuery.parseJSON(JSON.stringify(data));
        		var generatetRawHtmlList = [];
            
            for(person of jsonData)
            {
								generatetRawHtmlList.push(`<div class="col-4 person-details" data-person-id="${person.id}"></br> Name ${person.surname} </br> Surname: ${person.firstName}</br></div>`)

						}

					$('#container').append(generatetRawHtmlList.join('')).ready(function(){
          debugger;
            $('.person-details').on('click', onGetDetails);
          });
 	}
)});