Dynamic Anchor Tags from Rich Text (CMS collections)

Create dynamic anchor tags from rich text in your cms collections.
While working on a client's Webflow website, I needed a table of contents for each product information page and advice blog post. The problem was that this needed to be a dynamically generated list that included anchor tags to each specific section or chapter based on the content in a rich text field.
I looked at solutions online but only came across half solutions or solutions for full collections and not for the content inside of each collection item. So I decided to make my own.
The solution I came up with is super simple and allows you to customise it to your exact needs. All we need to do is give two elements on the page a unique ID and then add 15 lines of custom code.