I have multiple cells in a wPDataTable where the text needs to be red if the value in the cell is less than a similar value in a cell on a different table.

For instance - if the callbackRate in cell F2 of Table 1 is less than the callbackRateGoal in cell F2 of Table 2, then the text of callbackRate should be red. If not, the text should of callbackRate should be green.

I am basing everything on the steps followed in this solution - Custom wpDataTables JS - positive and negative

However, my tables are on tab #3 (KTI Performance) of this page - /

My steps are to:

1. Use javascript to change/add a class to the required cell (.numdata.float.column-callbackrate). If the cell should be red, the class is "neg". If the cell should be green, the class is "pos".
2. The tables are wpDataTablesID-21 (table 1 on the tab) and wpDataTablesID-31 (table 2 on the tab).
3. Right now, I have this javascript placed on the page itself.
4. Then, on the specific tab, I have the CSS.

Here is the javascript I have right now:

<script>
 (function($) {
    // Loop through each row in the wpDataTable ID 21
    $('.wpDataTables.table_5.numdata.callbackRate').each(function(index) {
        // Get the callback rate value from wpDataTables ID 21
        var callbackRate = parseFloat($(this).text());

        // Get the callback goal value from wpDataTables ID 31, same row
        var callbackRateGoal = parseFloat($('.wpDataTables.table_6.numdata.callbackRateGoal').eq(index).text());

        // Check the condition and apply appropriate class
        if (callbackRate < callbackRateGoal) {
            $(this).addClass("fallShort");
        } else {
            $(this).addClass("success");
        }
    });
})(jQuery);
</script>

Here is the CSS I am using:

.success {
    color: green;
}

.fallShort {
    color: red;
}

I can't tell if the JS is triggering as no classes are being updated.

THIS IS THE RESOLUTION Here is the JS - Which had to be placed in the MAIN WP custom JS (not at the wpDataTables level or the page level) in order to trigger.

jQuery(document).ready(function () {
    setTimeout(function () {
        jQuery("#table_5 tbody tr").each(function () {
            let closeRateCell = jQuery(this).find(".closeRate");
            let closeRateGoalCell = jQuery(this).find(".closeRateGoal");

            let closeRate = parseFloat(closeRateCell.text().trim()) || 0;
            let closeRateGoal = parseFloat(closeRateGoalCell.text().trim()) || 0;

            if (closeRate < closeRateGoal) {
                closeRateCell.addClass("red");
            }else{
                closeRateCell.addClass("green");
            }
        });
         jQuery("#table_7 tbody tr").each(function () {
            let columnrevenueCell = jQuery(this).find(".column-revenue");
            let columnrevenuegoalCell = jQuery(this).find(".column-revenuegoal");

            let columnrevenue = parseFloat(columnrevenueCell.text().trim()) || 0;
            let columnrevenuegoal = parseFloat(columnrevenuegoalCell.text().trim()) || 0;

            if (columnrevenue < columnrevenuegoal) {
                columnrevenueCell.addClass("red");
            }else{
                columnrevenueCell.addClass("green");
            }
        });
    }, 8000);
    setTimeout(function () {
        jQuery("#table_5 tbody tr").each(function () {
            let closeRateCell = jQuery(this).find(".closeRate");
            let closeRateGoalCell = jQuery(this).find(".closeRateGoal");

            let closeRate = parseFloat(closeRateCell.text().trim()) || 0;
            let closeRateGoal = parseFloat(closeRateGoalCell.text().trim()) || 0;

            if (closeRate < closeRateGoal) {
                closeRateCell.addClass("red");
            }else{
                closeRateCell.addClass("green");
            }
        });
         jQuery("#table_7 tbody tr").each(function () {
            let columnrevenueCell = jQuery(this).find(".column-revenue");
            let columnrevenuegoalCell = jQuery(this).find(".column-revenuegoal");

            let columnrevenue = parseFloat(columnrevenueCell.text().trim()) || 0;
            let columnrevenuegoal = parseFloat(columnrevenuegoalCell.text().trim()) || 0;

            if (columnrevenue < columnrevenuegoal) {
                columnrevenueCell.addClass("red");
            }else{
                columnrevenueCell.addClass("green");
            }
        });
    }, 10000);
    setTimeout(function () {
        jQuery("#table_5 tbody tr").each(function () {
            let closeRateCell = jQuery(this).find(".closeRate");
            let closeRateGoalCell = jQuery(this).find(".closeRateGoal");

            let closeRate = parseFloat(closeRateCell.text().trim()) || 0;
            let closeRateGoal = parseFloat(closeRateGoalCell.text().trim()) || 0;

            if (closeRate < closeRateGoal) {
                closeRateCell.addClass("red");
            }else{
                closeRateCell.addClass("green");
            }
        });
         jQuery("#table_7 tbody tr").each(function () {
            let columnrevenueCell = jQuery(this).find(".column-revenue");
            let columnrevenuegoalCell = jQuery(this).find(".column-revenuegoal");

            let columnrevenue = parseFloat(columnrevenueCell.text().trim()) || 0;
            let columnrevenuegoal = parseFloat(columnrevenuegoalCell.text().trim()) || 0;

            if (columnrevenue < columnrevenuegoal) {
                columnrevenueCell.addClass("red");
            }else{
                columnrevenueCell.addClass("green");
            }
        });
    }, 12000);
     setTimeout(function () {
        jQuery("#table_5 tbody tr").each(function () {
            let closeRateCell = jQuery(this).find(".closeRate");
            let closeRateGoalCell = jQuery(this).find(".closeRateGoal");

            let closeRate = parseFloat(closeRateCell.text().trim()) || 0;
            let closeRateGoal = parseFloat(closeRateGoalCell.text().trim()) || 0;

            if (closeRate < closeRateGoal) {
                closeRateCell.addClass("red");
            }else{
                closeRateCell.addClass("green");
            }
        });
         jQuery("#table_7 tbody tr").each(function () {
            let columnrevenueCell = jQuery(this).find(".column-revenue");
            let columnrevenuegoalCell = jQuery(this).find(".column-revenuegoal");

            let columnrevenue = parseFloat(columnrevenueCell.text().trim()) || 0;
            let columnrevenuegoal = parseFloat(columnrevenuegoalCell.text().trim()) || 0;

            if (columnrevenue < columnrevenuegoal) {
                columnrevenueCell.addClass("red");
            }else{
                columnrevenueCell.addClass("green");
            }
        });
    }, 15000);
});

Here is the CSS - Which had to be placed in the WP Appearance custom CSS area (rather than the wpDataTables or page level).

.numdata.float.closeRate.column-closerate.red {color: red !important;}
.numdata.float.closeRate.column-closerate.green {color: green !important;}

.wpdt-c .wpDataTablesWrapper table.wpDataTable.wpDataTableID-22 tbody td.numdata.float.column-revenue.red {
  color: red !important;
}
.wpdt-c .wpDataTablesWrapper table.wpDataTable.wpDataTableID-22 tbody td.numdata.float.column-revenue.green {
  color: green !important;
}