Multiple jQuery Pop-up Forms: Connect a href to divs for user input

Multiple jQuery Pop-up Forms: Connect a href to divs for user input

I'm working on a digital textbook feature that would allow the student to
click a link to open up a simple div form for them to input their answer
to that specific question. The pop-up form is just simple HTML/CSS with
some jQuery UI to hide, show, and make it draggable. Here's the twist.
I've got multiple questions that each need to be attached to a unique div.
No problem, I thought. I'll just set each a href to link back to a unique
ID that I've assigned within the DIV. Problem is, I can't seem to target
the proper DIV with its corresponding a href. Instead the same set of
questions appear no matter which link is clicked. This seems super simple
and I'm probably overcomplicating it. What can I do here?
HTML:
<div id="draggable" class="messagepop pop">
<form method="post" id="new_message" action="/answers">
<p><label for="body">What type of person is Carsten?</label><textarea
rows="15" name="body" id="body" cols="55"></textarea></p>
<p><label for="body">How do you know?</label><textarea rows="15"
name="body" id="body" cols="55"></textarea></p>
<p><center><input type="submit" value="Submit" name="commit"
id="message_submit"/> or <a id="hide" href="#">Cancel</a></center></p>
</form>
</div>
<div id="draggable" class="messagepop pop">
<form method="post" id="new_message" action="/answers">
<p><label for="body">What can you learn about an active volcano from
the photograph?</label><textarea rows="15" name="body" id="body"
cols="55"></textarea></p>
<p><center><input type="submit" value="Submit" name="commit"
id="message_submit"/> or <a id="hide" href="#">Cancel</a></center></p>
</form>
</div>
<a href="#" id="show">Draw Conclusions</a>&emsp;What kind of person is
Carsten? How do you know?
<a href="#" id="show">Use Text Features</a>&emsp;What can you learn about
an active volcano from the photograph?
Where the first a href needs to open the first div and the second a href
opens the second div, etc., etc.
CSS:
.messagepop {
overflow-y: auto;
overflow-x: hidden;
cursor:default;
display:none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align:left;
width:394px;
height: 335px;
z-index:50;
padding: 25px 25px 20px;
background-color: #fff;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-border-radius: 4px 4px 4px 4px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 4px 4px 4px 4px;
border-color: #E5E5E5 #DBDBDB #D2D2D2;
border-style: solid;
border-width: 1px;}
JS:
$(document).ready(function() {
$('.show').click(function() {
if ( !$(this).next('div').is(':visible') ) {
$(".messagepop").slideFadeToggle();
$(this).next('div').slideFadeToggle();
}
});
$('.hide').click(function() {
$(this).parent().slideFadeToggle();});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, "fast",
easing, callback);};
$(function() {
$("#draggable").draggable();});