[jQuery] Simple problem

Hello, I'm new to using jQuery. I was motivated by wanting to put some
panels on an ASP.NET website which would display additional info if a
link or button was clicked. I found a simple tutorial and mimicked
that and it works fine, but uses the specific ID of the hyperlink to
trigger the action. My page needs a list of items, and if you click on
one, extra information appears right below the item. So what I want to
do is capture clicks on any link, read the ID, and then use the ID to
identify the ID of the related asp:Panel element.

Here's the starting point:

<script type="text/javascript">
$(function() {
$("#myButtonID").click(function(evt) {
evt.preventDefault();
$('#myPanelID').toggle('fast');
});
});
</script>

If you click on the button rendered thusly:

<input id="myButtonID" type="button" value="Hide/Show" />

The panel with id="myPanelID" is toggled (the CSS defines it so that
display is set to "none" by default.

But I want a list of these panels and buttons on my page, so I want
the code to be able to do this for any of the buttons I click.

It also works if instead of the button with the specific ID
"myButtonID" I change

$("#myButtonID").click(function(evt)

to

$("input").click(function(evt)

My impression is that this will cause the code to trigger if any input
element on the page is clicked, which is the first step to what I want
to do. My notion is that I can then get the value of the clicked
button and use that value to identify which panel to animate.

One of the FAQs on the jQuery site says I can get the value of the
button thusly:

var mybuttonval = $("input").val();

Then I could use a simple naming convention and use that value to
identify the Panel I want to animate. For example, if my button had
the value "ACME_widget-mach1" I could set the Panel I want to show
text in to "panel_ACME_Widget-mach1"

So I rewrote my code as follows:

<script type="text/javascript">

$(function() {
$("input").click(function(evt) {
var panelID = "panel_" + $("input").val();
evt.preventDefault();
$(panelID).toggle('fast');
});
});
</script>

It appeared to work just like I hoped... until I put in a second
button/panel pair, with button ID= ACME_widget-mach2 and panel ID=
panel_ACME_widget-mach1. What happens is, regardless of which button I
click, only the first panel, the one with ID=panel_ACME_widget-mach1
is toggled.

It's as if when any button is clicked, the value I am getting is the
value of the first button in the collection. I put in an alert box
right after declaring the variable to test this:

alert(panelID);

and sure enough, the value that displays is the value assigned to the
first of these buttons on the page.

So what am I doing wrong here? How can I get the value of the button
that is actually clicked?

Thanks!

Alan