Dynamically change color of Spotfire Calculated Values within an html table

In a Spotfire Text area I have calculated values set in a table that tracks a monthly score.

These are custom calculations.

the first row has the goals

The second row has actual scores.

Both goals and actuals are roll up of multiple different depts that contribute both to the score and the goal that I need to be able to drill down and make a report off of.

I am looking for a way for the actuals to dynamically change color in comparison to the goals.

Month	Jan	Feb
Goal	25.22	75.78
Score	66.12	30.87

in this example. The score for Jan should be red and the score for Feb would be green.

The Spotfire calculated values do not allow for dynamic colors that do not compare it to itself.

I have tried assigning the calculated values in HTML and Referencing them as variables.

I have tried an if statement with duplicates of the value. One in Red and one in green to show up if a third had a difference greater than zero.

have also tried assigning the caluclated values to javascript and having them returned recolored. but I cannot get it to reference or return

<!DOCTYPE html>
<html>
<head>
    <style>
        .value {
            font-size: 24px;
            font-weight: bold;
        }
        .red {
            color: red;
        }
        .green {
            color: green;
        }
        .black {
            color: black;
        }
    </style>
   </head>
   <body>
    <div id="value1" class="value" hidden><spotfireControl id="12345"></spotfireControl></div>
    <div id="value2" class="value" hidden><spotfireControl id="67890"></spotfireControl></div>
    <script>
        function updateValues() {
            // Fetch Spotfire values from controls
            var value1 = parseFloat(document.querySelector('[spotfireControl][id="12345"]').innerText)|| 0;
            var value2 = parseFloat(document.querySelector('[spotfireControl][id="67890"]').innerText)|| 0;

            var value1Element = document.getElementById('value1');
            var value2Element = document.getElementById('value2');

            // Function to update color based on the value comparison
            function updateColor(element, value) {
                if (isNaN(value) || value === '') {
                    element.className = 'value black';
                } else if (value > 0) {
                    element.className = 'value green';
                } else if (value < 0) {
                    element.className = 'value red';
                }
            }

            // Update both values
            updateColor(value1Element, value1);
            updateColor(value2Element, value2);
        }

        // Run the function to update values and colors
        updateValues();
    </script>
</body>
</html>