Refrence CMS in custom div attrbute

I have a few fields in CMS that i wanna set as data attributes of the CMS item in the Collection List, anyone have a minimalistic way of doing this?

Before the solution was to add 4 text fields, refrence the CMS text for each field, display:hidden and put a ID on each of the attributes, then loop throught hem with JS and take each text field and add the attribute to the parent element.

However this requires me to have 4 extra elements for each CMS item, wich becomes a problem when you have 300 cms items on one page, it woudl result in 4x300 = 1200 more elements.

If i could add custom div attributes on the “CMS Item” and refrence the fields, no additional elements would be needed, nor any JS.

Anyone have a better idea of doing this?
I had a plan of adding an embedded and refrence the cms in there, Embeded =>

CMS1, CMS2, CMS3, CMS4
and then split it and apply it as attributes with JS, but feel like this is only semi optimal.


By JS. But anyway no way to solve this without extra element (Embed code with span and four data-src sound the most minimal her).

Maybe try this trick

$(".cms-card").wrap("<div data-src="hello" data-width="100" data-lorem="ipsum"></div>");

If this idea could work for you - its should take ± 10 minutes to convert this idea to loop throw all cms items (Update me).


Maybe you find some idea her (More complex example):
(In this example i convert youtube id to code - the concept/steps should be the same±. And first try to create this by codepen (Copy-paste the html from webflow)