Apply CSS to certain product thumbnails only

Can you just specify a new class when you create those thumbnails, and style accordingly?

If this is what you want to do:

You need to grab every element that has the [data-id] attribute into an object array
var ids = document.querySelectorAll("[data-id]");

Then you need to iterate over them, and check the value:

ids.forEach((el) => {
        if (parseInt(el.dataset.id) > 100) {
            el.classList.add("new-style");
        }
    });

You can add the new styling in your CSS (so you can change it as needed without touching the js)

You want to wrap the js in a document ready so the elements are there before it starts, or it’ll return undefined.

The final code:

document.addEventListener("DOMContentLoaded", function () {
    var ids = document.querySelectorAll("[data-id]");

    ids.forEach((el) => {
        if (parseInt(el.dataset.id) > 100) {
            el.classList.add("new-product");
        }
    });
});

Then you can target the new products using .new-product{} in your CSS files.

I hope that helps!