I need to store data to represent this:

Water + Fire = Steam
Water + Earth = Mud
Mud + Fire = Rock

The goal is the following: I have draggable HTML divs, and when <div id="Fire"> and <div id="Mud"> overlap, I add <div id="Rock"> to the screen. Ever played Alchemy on iPhone or Android? Same stuff

Right now, the way I'm doing this is a JS object :

var stuff = {
    'Steam' : { needs: [ 'Water', 'Fire'] },
    'Mud'   : { needs: [ 'Water', 'Earth'] },
    'Rock'  : { needs: [ 'Mud',   'Fire'] },
    // etc...
};

and every time a div overlaps with another one, I traverse the object keys and check the 'needs' array.

I can deal with that structure but I was wondering if I could do any better?

Edit: I should add that I also need to store a few other things, like a short description or an icon name. So typicall I have Steam: { needs: [ array ], desc: "short desc", icon:"steam.png"},