To make it easier to tell what has already been tagged for filtering and what those tags are (dpgn- classes) there should be an option in the filtering interface to display them onscreen.

The way of doing this is probably to use ::after and content CSS properties to display the contents of the class attribute. This could be done with CSS like the following (untested):

.show-dpgn-tags [class*="dpgn-"]::after {
  content: "<code>[" attr(class) "]</code>";
}

This could then be enabled/disable by adding/removing the show-dpgn-tags class higher up in the DOM.

Now the problem with the above approach is it would show non-dpgn classes if they are in the same class attribute and would also display dpgn- classes that are not filtering options (don't know if there are any yet). This may not be an issue at all, particularly for the separate div/section elements which wouldn't have any classes, but there could be risk when we start tagging individual list items (although this is just a theoretical risk at the moment and may not come to pass).

So probably best to initially go with the simple approach above, and only add more complexity if needed. If we are careful with how things are tagged then we may not need the extra complexity.