Buttons activate/deactivate elements in list (complex case)

I've been trying as hard as I can but I think I'm over my head on this one, I just don't have the jQuery knowledge to accomplish what I need, I'm pretty new as you will see.

This may be a complex case, so I will try to explain as good as I can:

I have a list of items, LIs, grouped by titles in an accordion, so when you expand/collapse a section, you see the corresponding list for that section.

Each section contains the list and 开发者_C百科at the bottom of the list are two buttons: Clear Selected and Select All.

Upon entering the page, the first accordion section is expanded, inside you'll see the list, and at the bottom of the list you see the Clear Selected and Select All buttons. The Clear Selected button is visible but 'inactive'. To create the 'inactive' effect I just used opacity:.5; in the CSS. I need this button visible when it's 'inactive',

So far, I've been able to have the "Select All" button change its class, but the rest of the cases and behaviors are too complex for me.

The interaction between the buttons and the elements on the list, and between the buttons themselves is what I need help with.

Just FYI, what I'm building is a results system in which you can filter those results by clicking on the elements/options inside the accordions.

Here's a DEMO.

Any help on this it's greatly appreciated.

Thanks,

EDIT--

Read the comments in the JavaScript section of the DEMO to know the functionalities that are needed.

I think I have most of you're asking for worked out. Take a look at my code and see if it's what you're wanting. http://www.jsfiddle.net/lmcculley/ujuH6/10/ Hope it works!