Has anyone successfully added a dynamic class name to each item within a Webflow collection list using custom JS? We want to vary the styling across the list items based on a field within the CMS. We're aware of the option to use multiple collection lists for different styling, but we're looking for more control. Any advice or examples would be appreciated. Thank you!

Yes, it's absolutely possible to add a dynamic class name to each item within a Webflow collection list using custom JS. This approach gives you more control over styling variations based on CMS fields.

To achieve this, you'll need to follow these steps:

1. Add a Collection List to your Webflow page and bind it to your CMS collection.
2. Inside the Collection List, add a Div Block and set it as the wrapper for your collection item. This div will act as a container for each item.
3. Within the Collection List, add a Link Block or any other element that represents an item in your list. This element will serve as the container for your dynamic content.
4. Now, you can write custom JavaScript code to add dynamic class names to each item within the collection list. To do this, you'll need to target the specific class or element within the collection item and use JS to manipulate the DOM.

Here's an example of how this can be done using jQuery:

```
$(document).ready(function() {
$('.collection-list-wrapper .collection-item').each(function(index) {
var dynamicClass = $(this).find('.cms-field-name').text(); // Replace '.cms-field-name' with your actual CMS field class or selector
$(this).addClass(dynamicClass);
});
});
```

In the above code, we're using the jQuery library to iterate over each collection item within the wrapper element. For each item, we're retrieving the text value of a specific CMS field (represented by the selector '.cms-field-name') and assigning it as a class name to that item.

Remember to replace '.collection-list-wrapper', '.collection-item', and '.cms-field-name' with the actual class or selector names in your Webflow project.

By using this approach, you can dynamically style each item based on a specific field within the CMS. This gives you more control and flexibility compared to using multiple collection lists for different styling purposes.

Make sure to include the jQuery library in your project or modify the code if you're using a different JavaScript library or vanilla JS.

Hope this helps! Let me know if you have any further questions.