JSFiddle - React, Tailwind, and code Playground

HTML

<i style='display:none' id="loadingPopup">Loading</i>
<table>
    <tr>
        <td data-id="WISSEM"> row 1</td>
    </tr>        
   <tr>        
        <td data-id="td2"> row 2</td>
    </tr>
    <tr>
        <td data-id="td3"> row 3</td>
    </tr>        
</table>

CSS

table{font-family:arial; font-size:12px; width:100%}
table tr td{border-bottom:1px solid #CCC; padding:10px; 100%}

JavaScript

$("table").on("click", function(event){
    var $target = $(event.target); 
    if($target.is("td")){
        var id = $target.attr("data-id");
        makeAjax(id);
    }
});

//simulating ajax

function makeAjax(id){
    //you will have to use ajax an retrieve you json format
    //i will simulate ajax only
    $("#loadingPopup").show();
    var _json = { id : id, value : "INCOMING DATA", description : "some description"};
    setTimeout(function(){response(_json)}, 1000);
}

function response(_json){
    $("#loadingPopup").hide();    
    alert(_json.id + " - " + _json.value);
}