[jQuery] Dynamic Event Handler

[Ryan]

I have some 'NAV' elements, that when clicked should slideToggle their
respective 'DATA' elements. I am trying to do this by traversing an
Object with a for loop, and each elements IDs are stored in this data
structure. However, once execute, each click of any of the NAV
elements only slideToggles the last DATA element.

Ex:

Code:

-- JAVASCRIPT
var categories = new Array();
categories[1] = new Object;
categories[1]['nav_id'] = 'NAV_1';
categories[1]['data_id'] = 'DATA_1';
categories[2] = new Object;
categories[2]['nav_id'] = 'NAV_2';
categories[2]['data_id'] = 'DATA_2';

-- JQUERY
for( var index in categories ){
  var nav_id    = categories[ index ]['nav_id'];
  var data_id   = categories[ index ]['data_id'];

  $('#' + nav_id).click( function(){
        $('#' + data_id).slideToggle('slow');
      }
   );
}

-- HTML
<div id='NAV_1'>
</div>
<div id='NAV_2'>
</div>

<div id='DATA_1'>
</div>
<div id='DATA_2'>
</div>
-- each div is absolutely positioned in the page



I could possible see that JQuery could get confused by this, but to me
should be able to work somehow. Could there possibly be a way to do a
foreach() through element id's that match a certain regular
expression?

Any help is greatly appreciated!