How can I generate a unique HTML ID for a heading inside a collection list item in Webflow without duplicating it when new collection list items are added?

In Webflow, you can generate a unique HTML ID for a heading inside a collection list item by leveraging Webflow's dynamic field feature and custom code embeds.

Here's a step-by-step process to achieve this:

1. Add a dynamic field to your collection list item: Start by selecting the heading element inside your collection list item. Then, go to the "Add Field" button in the settings panel and choose the dynamic field option. This dynamic field will act as the unique identifier for the heading.

2. Set the value of the dynamic field: Once you've added the dynamic field, you need to specify a value for it. You can use any field from your collection or a combination of fields to create a unique value for each collection item. For example, if you have a "Title" field and a dynamic "ID" field, you can concatenate the two fields to create a unique ID: `{{Title}}-{{ID}}`.

3. Add a custom code embed to generate the HTML ID: After setting the value for the dynamic field, you can use custom code embeds to generate the HTML ID based on the dynamic field's value. To do this, select the heading element again and go to the settings panel. Expand the "Attributes" section and click on "Custom Attributes." Add a new attribute (e.g., "id") and set its value using JavaScript code.

Here's an example of JavaScript code that generates the HTML ID:

```javascript

```

In the above code snippet, we're using the `querySelector` method to select the heading element. Then, we retrieve the value of the dynamic field using the `getAttribute` method. Finally, we set the HTML `id` attribute of the heading element using the `id` property and manipulate the dynamic field value to meet HTML ID requirements (e.g., replacing spaces with hyphens).

Remember to replace `.collection-item` and `.heading-element` selectors with the appropriate classes for your collection item and heading element.

By following these steps, each collection item's heading will have a unique HTML ID based on the values of the dynamic fields, even when new collection list items are added.