Streaming live at 10am (PST)

Unique IDs in Collection Items


Dear Webflow Community,

I am trying to give a unique HTML ID to a heading inside a collection list item. It does not have any CMS content tied to it. But obviously, as it is part of the HTML collection list item, it gets duplicated with the every new collection list item, also duplicating it’s ID and making the ID non-unique.
It doesnt have to be a particular ID, it just has to be a unique one for each heading in each collection list item.

Using Javascript my approach so far was the following:
Use a script inside an embedded HTML element to find the innerText of another heading inside the collection list item that gets its content from the CMS and is therefore unique content.


The is problem that : $(this).find("#referenceHeadingId ").innerText; results in undefined.
And I tried and tested a lot but can’t seem to find the solution.

Is there maybe a better way to generate a unique ID for each heading in each collection list item?
Or is there a better way to access the innerText of an element?

I hope this is understandable.
Thanks in advance


collection page - No way to create unique-ids by JS (Each collection page is with the same code = same id if you work by JS).

To generate ID number (start from X) for html list of p/li/divs or any idea like this - its very simple (If you want i will add codepen) - but what the idea behind this id? (Why not using regular cms field? like number-field)

Also the id will be wrong over pages (IF you filter -or- limit -or- Conditional visibility the collection).


You have the right idea of dynamically setting the ID using the heading text. The issue is that you cannot use inline jQuery in embed code blocks, and have to do it in the page footer code.

If you still need help with this you can contact me here.