How can I read specific data from a Webflow collection item using custom code in JavaScript, when there are multiple rows with repeated buttons on the page?

To read specific data from a Webflow Collection item using JavaScript when there are multiple repeating elements (like buttons), you'll need to identify and use relative DOM selectors and Webflow CMS attributes efficiently.

1. Structure CMS Collection To Include Data Attributes

• In your Collection List, embed the required data (like title, slug, ID) into an element using custom data-* attributes.
• Select the element tied to each row — for example, a button or div — and go to the Settings panel.
• Add a custom attribute, such as data-title, data-id, or data-slug, and bind it to the Collection field (e.g., Name or Slug fields).

2. Use JavaScript To Read Data on Button Click

• Target the button within each collection row using a class selector (e.g., .read-btn).
• On click, use closest() or parentElement to traverse the DOM upward and extract associated data attributes from nearby elements.

Example logic:

• Add a button in each collection item with class: read-btn.
• Add a parent wrapper div with attributes like data-title and data-slug.

document.querySelectorAll('.read-btn').forEach(button => {  button.addEventListener('click', function() {    const parentItem = this.closest('.collection-item'); // Adjust class name as needed    const title = parentItem.getAttribute('data-title');    const slug = parentItem.getAttribute('data-slug');    console.log('Title:', title);    console.log('Slug:', slug);  });});

(Note: Replace .collection-item with your specific wrapper class name added in Webflow)

3. Optional: Inject Data into Hidden Elements Instead

• If data-* attributes aren’t possible, you can insert the dynamic CMS info (e.g., Slug, Name) into hidden elements like a <div class="cms-title" style="display:none;">.
• Then read from these hidden elements using selectors like .querySelector('.cms-title').textContent.

Summary

To access dynamic CMS content on button clicks in repeated collection items, bind collection fields to data attributes or hidden DOM elements, then use JavaScript event listeners and DOM traversal to read them contextually. This ensures you're targeting the correct data tied to each specific button and item.