Trying to resolve an SVG issue I'm having that involves hiding and showing

Is this a javascript issue, or just involves the CSS? @Paul_Wilkins

This is what happens when I do this:

It removes the svg on both the blue and the gray, only leaves one showing

It works in removing them off the blue background, but I want them all to appear on the gray.

What am I doing wrong here?

.wraph.inactive .playa,
.playb,
.playc,
.playd,
.playe,
.playf,
.playg,
.playh,
.playi {
  display: none;
}

When I remove this it looks like this:

.wraph.inactive .playa,
.playb,
.playc,
.playd,
.playe,
.playf,
.playg,
.playh,
.playi {
  display: none;
}

image