[bevc]

This is a follow up question to a question I asked before, but more specific. I get the feeling it's probably a lot more difficult to describe than it is to understand.

So I have an html table that's got 'n' number of rows of dynamic data. For each row (and two static rows at the end), I've created a nice little chevron icon, that I want to be able to click, and show some additional (dynamic) data. For this, I've created a mixin/function in my template that takes the info and displays the data.

However, because obviously the chevron icon has the same class, I can only get this to work for one row. My function (which works) looks like this:

Code

if (reportTable) {
   dropbtn.addEventListener('click', async (e) => {
       document.querySelector('.dropdown-content').classList.toggle('show')
   })
}

I'm not sure what to do to have my template mixin available for each row. Obviously I'm going to have to loop through the DOM elements in some way, but I don't know the best way to do it.

I hate these types of open-ended problems, so if anyone could give me a hint of the 'proper' way to do it, I'd be very grateful. Thanks.