The most important thing that is wrong in your code, is that you missinterpreted what $(function() { ..}) does. This is just a shortcut for $(document).ready(). It's fired after loading the page and NOT when anything changes on the page.
Then you use a very complicated way to find out the state of your list. You should have a look at jquerys data functions which allow you to bind data directly to an element. That's way more useable than your reading of img src and parsing it to get a simple index number. Look here (I left this approach as it is).
Next, you are repeating your code over and over. This makes it hard to handle especialy if you want to change anything. Better split reapeating parts of code into functions. This is what @thinklinux was requesting.
Anyhow, here is a working plunker (I prefer plunker because it's easier to debug and has a built in beautifier which makes code easier to read for those who want to help you).
I set up your values to arrays like that:
// A global array for convenience
subs = new Array();
subs['Shelter'] = ['shelter-one', 'shelter-two', 'shelter-three', 'shelter-four', 'shelter-five'];
subs['Food'] = ['food-one', 'food-two', 'food-three', 'food-four', 'food-five'];
subs['Energy'] = ['energy-one', 'energy-two', 'energy-three', 'energy-four', 'energy-five'];
subs['Transport'] = ['transport-one', 'transport-two', 'transport-three', 'transport-four', 'transport-five'];
subs['Economy'] = ['economy-one', 'economy-two', 'economy-three', 'economy-four', 'economy-five'];
setup_effects();
var filterOne = ['shelter', 'food', 'energy', 'transport', 'economy'];
An handle everyting over a single function:
//Now setup the master filter
//Parameters are:
// Element to change
// Array to use
// Master filter
// update on apply
applyfilter('filter-one', filterOne, true, false);
This function itself calls apllyfilter with the last two parameters changed. This is not a very elegant approach (think spaghetticode!), but at least it works.
Find the full code here
