This is probably a simple question, and i'm just being dense. I've looked through a few jquery books and nothing has jumped out at me, i'm probably missing something.

I'm looking for the 'proper', best practices way to communicate between divs/dom items on a page?

For example, I have a page with 5 panels that display when a link is chosen, they hide/show/run some code that changes other pieces on the page. Something like this snippet:

<ul>
<li><div id="unique_name_1_anchor">Unique div 1</div></li>
<li><div id="unique_name_2_anchor">Unique div 2</div></li>
<li><div id="unique_name_3_anchor">Unique div 3</div></li>
<li><div id="unique_name_4_anchor">Unique div 4</div></li>
</ul>

...Somewhere else on the page

<div id="unique_name_1_panel">Some panel 1 stuff here</div>
<div id="unique_name_2_panel">Some panel2 stuff here<div>
<div id="unique_name_3_panel">Some panel3 here</div>
<div id="unique_name_4_panel">Some panel4 here</div>

The concept being when as user clicks on a unique_name_X_anchor div, some action is performed on the corresponding panel (ie show/hide etc...). What I have been doing now is parsing the id ie ($(this).replace("_anchor","_panel") to get the div id of the other dom element. This just seems clunky and there must be a better/more proper way of doing this. Suggestions?

Thanks