popup Div td get value using Jquery

Question

Below is the div which i am trying to show in a popup. How do i get the td value from the popup. When trying to call the popupClick(). it returns undefined. I have attached the code below. Thanks in advance for the help.

function btnSmartResult() {
            $.ajax({
                dataType: "json",
                url: "/Rule/SmartResultExecution",
                //datatype: "text",
                type: "POST",
                success: function (data) {
                    $('#smartresultTable tbody').empty();


                    $.each(JSON.parse(data), function (index, jsonResult) {
                        console.log(jsonResult.CurrentClaimIPID);
                        var rows = "<tr>" + "<td class='smartresultId'  onclick='popupClick();'><a href='#'>" + jsonResult.ClaimSummaryId + "</a></td>" + "<td>" + jsonResult.PatientName + "</td>" + "<td>" + jsonResult.PayorName + "</td>"
                            + "<td>" + jsonResult.ClientDemographicMasterID + "</td>" + "<td>" + jsonResult.AmountPaid + "</td>" + "</tr>";
                        $('#smartresultTable tbody').append(rows);
                    });
                var modal = document.getElementById('ruleSmartResultPopup');
                modal.style.display = "block";
            },
            error: function (data) { }
        });
    }



 function popupClick() {

        var obj = { claimSummaryID: parseInt($(this).closest("tr").find("td").eq(0).html()) };
        alert($(parseInt($(this).closest("tr").find("td").eq(0).html())));
    }

<div class="modal1-body" style="height:400px;overflow-y:auto;">
                <br />
                <div class="col-md-12 container-fluid">
                    <table id="smartresultTable" class="table table-striped table-bordered smartresultClass">
                        <thead style="text-align:center;background-color:cadetblue;color:white;">
                            <tr>
                                <td>ClaimSummaryID</td>
                                <td>PatientName</td>
                                <td>PayorName</td>
                                <td>ProviderName</td>
                                <td>TotalPaid</td>
                            </tr>
                        </thead>
                        <tbody style="text-align:center;"></tbody>
                    </table>
                </div>
            </div>

Answer 1

try this

function btnSmartResult() {
            $.ajax({
                dataType: "json",
                url: "/Rule/SmartResultExecution",
                //datatype: "text",
                type: "POST",
                success: function (data) {
                    $('#smartresultTable tbody').empty();

                    $.each(JSON.parse(data), function (index, jsonResult) {
                        console.log(jsonResult.CurrentClaimIPID);
                        var rows = "<tr>" +
                        "<td class='smartresultId' id='" + jsonResult.ClaimSummaryId + "' onclick='popupClick(this.id);'><a href='#'>" + jsonResult.ClaimSummaryId + "</a></td>" +
                        "<td>" + jsonResult.PatientName + "</td>" +
                        "<td>" + jsonResult.PayorName + "</td>"
                        +
                        "<td>" + jsonResult.ClientDemographicMasterID + "</td>" +
                        "<td>" + jsonResult.AmountPaid + "</td>" +
                    "</tr>";
                        $('#smartresultTable tbody').append(rows);
                    });
                    var modal = document.getElementById('ruleSmartResultPopup');
                    modal.style.display = "block";
                },
                error: function (data) { }
            });
        }



        function popupClick(value) {
            alert(value);
        }