Handling click events on ingredients list I'm learning programming and would appreciate any feedback on my code. I've come up with the below code. The logic works fine but the code itself seems rather confusing to me. Are there some patterns I could use to improve this code?

// This code snippet handles click events on the Ingredients list (see the image below)

$('.items a').click(function (event) {

    // Remove leading letter from the href id (e.g. id="i15" --&gt; 15)
    ingr = parseInt((this.id).substring(1));

    // Here comes the complicated logic for handling click event
    // It works well but can it be improved/simplified?
    if (buy.indexOf(ingr) != -1) {
        if (weHave.indexOf(ingr) != -1) {
            if (weNeed.indexOf(ingr) === -1) {
                weNeed.push(ingr);
                whIndex = weHave.indexOf(ingr);
                weHave.splice(whIndex, 1);
            }
        } else {
            if (weNeed.indexOf(ingr) === -1) {
                weHave.push(ingr);
            } else {
                weHave.push(ingr);
                wnIndex = weNeed.indexOf(ingr);
                weNeed.splice(wnIndex, 1);
            }
        }
    } else {
        if (weHave.indexOf(ingr) != -1) {
            weNeed.push(ingr);
            whIndex = weHave.indexOf(ingr);
            weHave.splice(whIndex, 1);
        } else {
            if (weNeed.indexOf(ingr) != -1) {
                weHave.push(ingr);
                wnIndex = weNeed.indexOf(ingr);
                weNeed.splice(wnIndex, 1);
            } else {
                weNeed.push(ingr);
            }
        }
    }
    shoplist();
    return false; // to prevent the page from scrolling to the top
});


EDIT: Edited the code above and provided more background information below.

Here is a simplified picture of the application I'm trying to create:



Briefly how the application should work:


The idea is to create a shopping list by selecting food and/or ingredients 
Clicking on a food item will highlight the food item and all necessary ingredients 
Clicking on already highlighted food item will remove the highlighting from the food item and all necessary ingredients 
Clicking on an ingredient will highlight the ingredient
Clicking on already highlighted ingredient will remove the highlighting from the ingredient


The above is basic logic but here is where it gets complicated. There are couple of scenarios I'm trying to handle in the code above (these are independent scenarios):


I click on Spaghetti Bolognese. Necessary ingredients, including onion, get highlighted. Then I click on onion, indicating that I already have this ingredient at home. The highlighting is removed from the onion. Then I click on Pork Stew (which requires onion) but onion shouldn't get highlighted because I have already indicated that I do have an onion at home.
I click on Spaghetti Bolognese. Necessary ingredients, including onion, get highlighted. Then I click on Pork Stew. Pork Stew requires onion too so the onion item stays highlighted. But then I decide I don't want to make Spaghetti Bolognese after all so I unclick it. The onion should stay highlighted because it's required for Pork Stew.


So to handle these kind of scenarios I came up with two arrays: weNeed and weHave. 

Here is a list of inputs/outputs:


ingr: integer; clicked ingredient
buy: unique list of ingredients, concatenation of weNeed + food (food is an array of ingredients coming from the FOOD list; not in the above code)
weNeed: list of ingredients collected when user clicks on unhighlighted ingredient item
weHave: list of ingredients collected when user clicks on highlighted ingredient item


P.S. Looking back at my question this has grown into a monster. I'm not sure if the extra information I provided is helpful or even more confusing. I could post the whole code if it helps but something is telling me that dealing with these kind of complex issues on the forum is probably not the right way to do things. I'll be happy for any suggestions.
Druciferre seems to have found a way to streamline your current code quite nicely (I would add that an "is-value-x-in-array-y?" helper function would greatly improve readability, as all the indexOf comparisons make me cross-eyed. A "remove-x-from-array-y" function would also help DRY the code), so allow me to suggest a different tack altogether; more rewrite than tweak. Reading your description, here are my suggestions.

1. Objects for each recipe

There are plenty of ways to do this, but the simplest, most direct one I can think of is:

var recipes = [
  {
    name: "Pork stew",
    ingredients: ["pork", "stew", "onion"]
  },
  {
    name: "Spaghetti bolognese",
    ingredients: ["spaghetti", "city of bologna", "onion"]
  },
  // ....
];


(can you tell I don't cook much?)

Anyway, the point is that each recipe "contains" its ingredients. A neat logical encapsulation of data.

2. Use underscore.js (or similar, or roll your own) array functions

Underscore's got some neat array functions. Use 'em. Let's say you have both of the above recipes selected. To get all the ingredients needed, you could do

// concatenate every recipe's ingredients into one array
var requiredIngredients = _.reduce(selectedRecipes, function (ingredients, recipe) {
  return ingredients.concat(recipe.ingredients);
}, []);
requiredIngredients = _.uniq(requiredIngredients); // remove duplicates


Edit Changed _.map to _.reduce which is what I meant to write first time around, but somehow messed up.

Thus, requiredIngredients will be:

["pork", "stew", "onion", "spaghetti", "city of bologna"]


So now you have an array of all the ingredients needed to cook those two dishes.

Now, let's say you also have an array of ingredients that the user has manually selected and one that contains those that he/she already has (i.e. manually unselected):

var ownedIngredients = ["onion", "olive oil"];
var selectedIngredients = ["curry"];

// combine manually selected ingredients with recipe ingredients,
// and remove duplicates
var allIngredients = _.uniq(requiredIngredients.concat(selectedIngredients));

// "subtract" unselected ingredients
var shoppingList = _.difference(allIngredients, ownedIngredients);


And, well, that's pretty much it. When you select a new recipe, re-run that code. When you add/remove an ingredient, re-run that code. With just the above you'd get a shopping list of

["pork", "stew", "spaghetti", "city of bologna", "curry"]


Of course, this is me taking a stab in the dark, not knowing the rest of your app. But this, to me, seems like a better approach than manually trying to manage arrays element-by-element.