So, i have a loop item template, where among other things, there is a button widget(with no click on it, used just for shape and easy to use) that fetch a custom field value from the post. This value is a number between 0-100. The button is accompanied by a script that change the color of the button based on the value in it.

Now here’s the problem:
When using this template for the loop grid widget, the script work only for the first post in the list. All other post have standard color button that not depend by the value in it. All other things work fine. My only problem is to let this javascript work for every element in the loop grid widget. I tried to put the script not in the loop item template but in page where the the loop grid widget will be used, but it doesn’t work either.

Here the script if it help

<script>
    function getColor(value) {
        const colors = {
            0: '#F50000', 1: '#F50000', 2: '#F50000', 3: '#F50000', 4: '#F50000', 5: '#F50000', 6: '#F50000', 7: '#F50000', 8: '#F50000', 9: '#F50000',
            10: '#F50000', 11: '#F50000', 12: '#F50000', 13: '#F50000', 14: '#F50000', 15: '#F50000', 16: '#F50000', 17: '#F50000', 18: '#F50000', 19: '#F50000',
            20: '#F50000', 21: '#F50000', 22: '#F50000', 23: '#F50000', 24: '#F50000', 25: '#F50000', 26: '#F50000', 27: '#F50000', 28: '#F50000', 29: '#F50000',
            30: '#F50000', 31: '#F50000', 32: '#F50000', 33: '#F50000', 34: '#F50000', 35: '#F50000', 36: '#F50000', 37: '#F50000', 38: '#F50000', 39: '#F50000',
            40: '#F50000', 41: '#F50000', 42: '#F00000', 43: '#EB0000', 44: '#E60000', 45: '#E10000', 46: '#DC0000', 47: '#D70000', 48: '#D20000', 49: '#CD0000',
            50: '#C80000', 51: '#C80A00', 52: '#C81400', 53: '#C81E00', 54: '#C82800', 55: '#C83200', 56: '#C83C00', 57: '#C84600', 58: '#C85000', 59: '#C85A00',
            60: '#C86400', 61: '#C86E00', 62: '#C87800', 63: '#C88200', 64: '#C88C00', 65: '#C89600', 66: '#C8A000', 67: '#C8AA00', 68: '#C8B400', 69: '#C8BE00',
            70: '#C8C800', 71: '#BEC800', 72: '#B4C800', 73: '#AAC800', 74: '#A0C800', 75: '#96C800', 76: '#8CC800', 77: '#82C800', 78: '#78C800', 79: '#6EC800',
            80: '#64C800', 81: '#5AC800', 82: '#50C800', 83: '#46C800', 84: '#3CC800', 85: '#32C800', 86: '#28C800', 87: '#1EC800', 88: '#14C800', 89: '#0AC800',
            90: '#00C800', 91: '#00CD00', 92: '#00D200', 93: '#00D700', 94: '#00DC00', 95: '#00E100', 96: '#00E600', 97: '#00EB00', 98: '#00F000', 99: '#00F500',
            100: '#00FA00'
        };
        return colors[value];
    }

    function updateCircle() {
        const button = document.getElementById('myButton');
        const value = parseInt(button.innerText, 10);
        const primaryColor = '#605BE5'; // primary color fixed
        const secondaryColor = getColor(value);
        button.style.backgroundImage = `linear-gradient(to bottom, ${primaryColor}, ${secondaryColor} 80%)`;
    }

    // Constantly update color
    setInterval(updateCircle, 10);
</script>

The button have the ID set to ‘myButton’, and I thought that’s where the problem lies, maybe in subsequent elements of the loop grid, the buttons lose that id?