In Webflow, I have a team member card component. I have properties for name, role, photo, socials. I want to display a modal when I click a profile (component). However, I can't see how to add different interactions for each component instance. Example: click team member A, open modal A with their bio. Right now I can only have a single interaction that applies to all instances of the component, therefore every team member displays the modal A 馃槩 Any ideas? (Client not on CMS plan)
Hi blair, I created a replit with the challenge and you can access the code: https://replit.com/@sofianbettayeb1/TechnologicalExtraneousOpenlook?v=1 Let me know if it鈥檚 not clear. But in short Every team member card has an attribute to open a modal
<div class="team-member" onclick="openModal('member3')">
<img src="member3.png" alt="Member 3">
<h3>Member 3</h3>
</div>Then it run a function to open the right modal for the right person.
function openModal(memberId) {
const modal = document.getElementById('modal');
const details = document.getElementById('modal-details');
details.innerHTML = `
<h2>${teamMembers[memberId].name}</h2>
<h4>${teamMembers[memberId].role}</h4>
<p>${teamMembers[memberId].bio}</p>
`;
