Getting values from HTML element

Well i was trying to build a page where iuser can change the background color of the page, background of a repeating group and font color, using 3 color picker inputs, but i dont wanted to do use plugins except toolbox. So i used an HTML element to make the inputs. And followed a solution for a similar problem to make the first input, it worked but when i add the other 2 inputs, just the one in first order works.
Maybe its too simple, but i think im missing something😅
This is what i was trying to do. First i put the 3 inputs in my HTML element

And i set the id of each input with a Javascript to bubble element for any input:



And in the workflow i did this. I add 3 “Run javascript” action to get each value of the 3 inputs. The script in the other two are the same, just changing de suffix and id for “cardPicker” or “fontPicker” respectively.

.

Then, when the script is executed just trigger a workflow to save the value in data base. Also, the workflow for the other 2 scripts is similar, changing the field and value.

I tought it will work like running the scripts and workflows 1 by 1 sequentially. But just work the first run javascript action, i can change the order, but always work only the first one.

Thank you, for all your help btw.

Have you tried calling all 3 Toolbox functions in 1 Run Javascript action?

Edit: Also make sure there are no additional spaces after each function name in the JavaToBubble elements.