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 fetches a custom field value from the post. This value is a number between 0-100. The button is accompanied by a script that changes 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 works only for the first post in the list. All other post have standard color buttons that does not depend on 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. The button has 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? Edit: I will add some extra info. I can't give more HTML because i'm using mostly elementor to do so. The only code I wrote was the script. But i can give you some example and a step-by-step process that I followed. Let's say I have 3 posts, which we will call postA, postB, postC. Each post has a custom field( created via the ACF plugin) which can be different or the same as other posts. This custom field we will call it 'Number' and it is always a value between 0 and 100(integer). postA has the 'Number' set to 12, postB to 99, postC to 72. My intent is to create, using Elementor, a 'loop item' that shows post name. Under that, the custom field 'Number' inside a circle whose color changes based on the value of 'Number' itself. Now, since I don't know how to take the value of 'Number' through a code written directly by me, and instead of creating an element with text in the middle in html, modifying it in the form of a circle and with specific color in CSS, I decided to use Elementor's 'Button' widget, which allows me easily to take the value of 'Number' from the current post in which it is located, and also is easy to modify for creating the circle with value inside that I am trying to achieve(of course I removed the possibility to 'click' on the button and any animation, making it a simple static circle). With that done, what was left for me to do was to create the script that would dynamically change the color of the button. The code I wrote, inserted via Elementor's 'HTML' widget, works fine, but only for the first button it finds, since I'm using the ID that should be unique. The final intent is in fact to insert on a page, via Elementor's 'Loop Grid' widget,(where the 'Loop Item' created just now is to be selected), a list of all the posts, with their name and their custom field 'number'. It should therefore come out something like: The button is NOT an actual button(no click option, no link, nothing happen if clicked), i simply use the widget 'button' of elementor to easly put the circle, edit it and easly get the 'Number' value inside it. Clearly, the script I wrote only works with the first element, in fact postA has the button where it is inserted, colored red. The other two following, however, have their button where the custom field ‘Number’ is inserted in a generic color (the one set by default in the widget itself) and not like in the image. 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); <button id="myButton">1</button> Run code snippetExpand snippet