JQuery Dialog box and div issue So I have a div "passage-content" and when a button is clicked, this div's text is put into a jquery dialog box.  The content of he div is constanly changing as the page is dynamic.  When a button is pressed, the content of the "passage-content" div changes.
Here is my HTML:
<div id="passage-section">
 <!-- Title -->
 <div id="passage-title"></div>

 <!-- The panel that will display the content -->
 <div id="passage-content">THIS IS A DIV</div>

 <!-- Button that when clicked activates a dialog box for the passage. -->
 <button id="max-passage" class="max"></button>
</div>

The text of "passage-content" is what I am trying to grab and insert into a dialog box.
I run into two problems.
1) Nothing appears in the div on the page, but when I click my dialog box button the text only appears in the dialog box.
Here is the code
  //Opens a dialog box when the button max-passage is clicked
  $('#passage-content').dialog({
   autoOpen: false,
   title: 'Passage'
  });
 $('#max-passage').click(function() {
   $('#passage-content').dialog('open');
  return false;
 });

2) If I change my code a little bit, the text appears in the div, but then my JQuery dialog box button does not work.
Here is the code
  //Opens a dialog box when the button max-passage is clicked
 $('#passage').dialog({
   autoOpen: false,
   title: 'Passage'
 });
 $('#max-passage').click(function() {
   $('#passage').dialog('open');
   return false;
 });

I think my problem is in the way I am calling #passage/passage-content, but I cannot figure it out.
Thank you very much for any help!

You need to use a div other than passage-content to use for the dialog:
<div id="passage-section">
 <!-- Title -->
 <div id="passage-title"></div>
  <br/>
 <!-- The panel that will display the content -->
 <div id="passage-content">THIS IS A DIV</div>
  <br/>

  <div id="passage-dialog"></div>
 <!-- Button that when clicked activates a dialog box for the passage. -->
 <button id="max-passage" class="max" onclick="return false;"></button>

  <script>
    //Opens a dialog box when the button max-passage is clicked

    $('#max-passage').click(function() {

      $('#passage-dialog')
.html($('#passage-content').html())
.dialog({ title: 'passage' });
    });
    </script>
</div>


From what I understand you want the div#passage-content to be visible on the page and also be inside the dialog. 
Create a div on the fly, make it a dialog component and set the content of #passage-content to the dialog
Something like this 
var $dialog = $('<div></div>').dialog({
    autoOpen: false,
    title: 'Passage'
});
$('#max-passage').click(function () {
    $dialog
.html($('#passage-content').html())
.dialog('open');
});

Here is a demo http://jsfiddle.net/dhirajbodicherla/db5SX/5434/