I' m not sure what am doing wrong, I am trying to populate the title and date of step 1 and 2 with that of the meetings content, when a register button is clicked.
But nothing happens when is clicked, so i guess am not getting the contents right or something.


HTML Code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>test</title>


<script>

$(document).ready(function() {

$(".button").click(function() {	
var date = $(this).closest(".meetings").children(".meeting-date").text();
var title = $(this).closest.(".meetings").(".title").text();
     
   $(".date").text(date);
   $(".title").text(title);
});
});
</script>
</head>

<body>
  
<article class="meetings">
<header>
<div class="meeting-type">
    General Meeting / New York
</div>
<h3><a href="" class="title">New York Conference</a></h3>
</header>

<section class="meeting_description">
    <div class="speaker">
      Sarah
      David
    </div>

     <span class="meeting-date">February 28, 2012</span>

</section>

<p class="register">
    <a class="button register first" href="#">Register</a>
</p>
</article>

<h3>===============================================================</h3>

 <!-- step 1 -->
 <div id='first-modal' class='modal'>
      <h4>Confirm Registration</h4>

    <p>
   Please click the confirm button below to complete your registration for the event;<br /> 
     <span class="title"></span>
     <span class="date"></span>
  </p>

</div>

<!-- step 2 -->
<div id='second-modal' class='modal'>
    <h4>Registration Complete</h4>

  <p>You have successfully registered for the event;<br /> 
     <span class="title"></span>
     <span class="date"></span>
  </p>

</div></body>
</html>