Very much a newbie here, so bear with me!

I'm trying to display a description from an object, but want javascript to retrieve another value (which can be from "1 to 100") from the object and set the background colour according to it's value. If I set the text to be this value, all works fine, but I really want to hide this "1 to 100" and display the description in th:text instead while still getting the javascript to retrieve the "1 to 100" do its thing.

Here's a snippet of the html

<div th:each="item : ${myObject.getItems()}">
    <td style="font-size: 10px;" class="valueTD" th:text="${item.getDescription()}" th:value="${item.getValue()}"></td>
</div>

Here's the javascript

var colorTDs = $('.valueTD');
$.each(colorTDs, function (index, colorTD) {
    var value = $(colorTD).html();
    if (!isNaN(value)) {
        var color = GreenYellowRed(value);
        $(colorTD).css('background-color', "rgb(" + color+ ")");
    }
});

As I say, if I set the th:text to be ${item.getValue()} it's all good.

I suspect it's something around the var colorTDs = $('.valueTD') but can't for the life of me work it out.