Problem with using JavaScript to set 'selected' class to nav bar on pages

Okay, so I'm running into a problem that I thought would be easy to figure out. I even spent all morning trying to find a solution.

Problem: I have a basic nav bar attached to a site I'm making that has 5 subpages, each with about a dozen articles that live there. So, eggs benedict and waffles are under 'breakfast' and burgers and soup are under 'lunch.' When a person is on 'breakfast subpage' or looking at 'waffles or eggs' articles I want the BREAKFAST on the nav bar to gain the 'selected' class which I'll have a background-color on.

Here is my crappy solution: https://codepen.io/wanderingwind/pen/xLKqvd

As you can tell, this is fine for just the main and subpages, but I'd have to add another else if statement for each bloody article, as well.

I've tried solutions like: https://stackoverflow.com/questions/26819675/navbar-highlight-for-current-page but for some reason it's not working and I am at a loss as to why. Any help would be super appreciated, as I've reached the stage of wanting to give up and take up canoeing as a hobby and I fucking hate the outdoors.