I have created a popup dialog that displays data in a table.
Now I want when I click the Select button to get the corresponding row of data in the request’s return results and then close the dialog.

Suppose I click the Select button at the line with Client Code: 1111, then I will get the data
ClientCode: '1111', ClientName: 'Test1', ClientOwner: 'Test1', Ver: 1, CreatedTime: '2024-04-28T15:15:02'
then close the dialog box.

So, I have implemented the jquery statement below to confirm that only when the Select button is clicked will the data be retrieved.
$('#clientdatatbl').delegate('tr td:first-child', 'click', function() { }

I investigated and it seems like I can’t get the reponse data out of the xhr.onload = function() function.
If this is wrong then please forgive me.
If this is not possible, I’m thinking of creating two more hidden columns: Ver and CreatedTime in the dialog table
and then getting the data through the find() function.

If anyone has any advice I’d appreciate it. Thanks!
Really hoping someone can help me here. I am still a JS newbie and have been struggling with this for the last two days!

My current code:

$openClientDialog = function () {
    // Create a request URL
    const apiUrl = 'http://127.0.0.1/test/api/table/2/get';
    const requestData = JSON.stringify({
        "ApiVersion": 1.1,
        "ApiKey": "ApiKey"
    });

    // Create object XMLHttpRequest
    const xhr = new XMLHttpRequest();

    // Setting request
    xhr.open('POST', apiUrl, true);
    xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');

    // Process request
    xhr.onload = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            // successful
            const responseJson = JSON.parse(xhr.responseText);
            console.log(responseJson);
            //Output 
            //Response: 
            //  Data: Array(6)
            //      0: {ClientCode: '1111', ClientName: 'Test1', ClientOwner: 'Test1', Ver: 1, CreatedTime: '2024-04-28T15:15:02'}
            //      1: {ClientCode: '2222', ClientName: 'Test2', ClientOwner: 'Test2', Ver: 2, CreatedTime: '2024-04-28T15:20:12'}
            //      2: {ClientCode: '3333', ClientName: 'Test3', ClientOwner: 'Test3', Ver: 3, CreatedTime: '2024-04-28T15:22:07'}
            //      ...

            let tableContent = `<div id="clientdlg" class="dialog" title="Client"><p>
                <table id="clientdatatbl" class="grid clientdata">
                    <thead>
                        <tr class="ui-widget-header" style="cursor: default">
                            <th></th>
                            <th>Client Code</th><th>Client Name</th><th>Client Owner</th>
                        </tr>
                    </thead>
                        <tbody>`;
                        $.each(responseJson.Response.Data, function(index, value) {
                            tableContent += `<tr class="grid-row-itemme" style="cursor: default">
                                <td><p><button id="btnSelectData">Select</button></p></td>
                                <td><p>${value.ClientCode}</p></td>
                                <td><p>${value.ClientName}</p></td>
                                <td><p>${value.ClientOwner}</p></td>
                            </tr>`;
                        });
                    tableContent += `</tbody></table></p>
                        <div class="command-center"><button id="btnCloseDialog" onclick="closeDialog()">Cancel</button></div></div>`;

        } else {
            // failed
            console.error('Request error:', xhr.statusText);
        }
    };
    // Run request
    xhr.send(requestData);
}

$('#clientdatatbl').delegate('tr td:first-child', 'click', function() {
//  const col1 = $(this).find('td:nth-child(2)').text();
//  const col2 = $(this).find('td:nth-child(3)').text();
//  const col3 = $(this).find('td:nth-child(4)').text();
//  console.log(col1,col2,col3);
//  console.log($(this));

//  I want to receive data after clicking the Select button here
//  {ClientCode: '1111', ClientName: 'Test1', ClientOwner: 'Test1', Ver: 1, CreatedTime: '2024-04-28T15:15:02'}
    
    closeDialog();
})