I’m working on a dashboard that fetches and displays revenue data from Klaviyo. I’m using jQuery and AJAX to get the data and populate a table. However, I’m encountering an issue where revenueKlaviyo_table is undefined. Here is the relevant part of my code:

<div class="box-header with-border white_bg">
    <h3 class="box-title">Revenue by Klaviyo</h3>
</div>
<div class="box-body">
    <table width="100%" id="klaviyoData" class="revenue-device-table">
        <thead>
            <tr>
                <th width="70%" class="text-right">Total</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<div class="overlay" id="revenueKlaviyo_preloader">
    <i class="fa fa-refresh fa-spin"></i>
</div>

let accessToken = '';

        $.ajax({
            url: "{{ route('klaviyo-authenticate') }}",
            type: "post",
            dataType: "json",
            success: function (data) {
                accessToken = data.access_token;
                
                // window.dashboard = new Dashboard(); 
                window.RevenueKlaviyo = new RevenueKlaviyo(window.dashboard, "https://api.cloudofgoods.com/api/v1/klaviyo/metrics/convertion-rate");
            },
            error: function (e) {
                console.log('Error fetching access token: ' + e);
            }
        });
            
        // Revenue Klaviyo 
        let RevenueKlaviyo = (function (dashboard, url) {
            let preloader, revenueKlaviyo_table;
            let status = false;

            if (dashboard === undefined) {
                dashboard = new Dashboard(); 
            }

            let init = function () {
                revenueKlaviyo_table = $('#klaviyoData tbody');
                preloader = $('#revenueKlaviyo_preloader');
                console.log("aaaa");
                populate();
            }

            let preloaderLoading = function () {
                preloader.html('<i class="fa fa-refresh fa-spin"></i>').show();
            }

            let preloaderSuccess = function () {
                preloader.hide();
            }

            let preloaderError = function () {
                preloader.html('<i class="fa fa-exclamation color-red"></i>').show();
            }

            let getStatus = function () {
                return status;
            }

            let populate = function () {
                console.log(accessToken);
                revenueKlaviyo_table.html('');
                $.ajax({
                    type: "get",
                    url: url,
                    data: {
                        dateText: dashboard.getDateText(),
                        customPickerFromDate: dashboard.getCustomPickerDateRanges().from,
                        customPickerToDate: dashboard.getCustomPickerDateRanges().to,
                        // interval: "day"
                        // city: dashboard.getCity()
                    },
                    headers: {
                        "Authorization": "Bearer " + accessToken,
                        // "Content-Type": "application/json"
                    },
                    beforeSend: function () {
                        preloaderLoading();
                        status = false;
                    },
                    success: function (response) {
                        let data = response.data;
                        if (data && data.total !== undefined) {
                            let total = data.total;
                            revenueKlaviyo_table.append(`<tr><td">${total.toFixed(2)}</td></tr>`);
                            preloaderSuccess();
                            status = true;
                        } else {
                            console.log('No data');
                            preloaderError();
                            status = true;
                        }
                    },
                    error: function () {
                        preloaderError();
                        status = true;
                    }
                });
            }

            let refresh = function () {
                populate();
            }

            return {
                init: init,
                refresh: refresh,
                getStatus: getStatus
            };
        });

I’ve ensured that the #klaviyoData table exists in the HTML. Can someone help me figure out why revenueKlaviyo_table is undefined and how to fix this issue?