I have created a single page with multiple anchors, each containing unique content that pops up when clicked. The functionality is working well, but I am facing an issue where clicking on a different anchor repeats the same content as the first anchor. I want each anchor to display its corresponding content in the popup. Below you will find my code. Thank you for your help.
<script>
$(document).ready(function() {
$('a.bio, a.bio2').click(function() {
// Fetching the variable's value from a link
var loginBox = $(this).attr('href');
// Display the popup
$(loginBox).fadeIn(300);
// Set the alignment padding and border for center see css style
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$(loginBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
// Adding the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
return false;
});
// Closing the popup when clicking on the close button or the mask layer
$('a.close, #mask').live('click', function() {
$('#mask , .login-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
});
</script>
The HTML
<a class="bio" href="#login-box">READ BIO >></a>
<div class="login-popup" id="login-box">
<div id="popupimage">
<h2>This is image 1</h2>
</div></div>
<a class="bio2" href="#login-box">READ BIO >></a></div>
<div class="login-popup" id="login-box">
<div id="popupimage">
<h2>This is image 2</h2>
</div></div>
The CSS
.login-popup {
background: none repeat scroll 0 0 #585858;
display: none;
float: left;
font-size: 1.2em;
height: 350px;
left: 50%;
padding: 20px;
position: fixed;
top: 50%;
width: 500px;
z-index: 9999999999;
color:#FFF;
}