title: Creating multiple instances of dialog box
body: <p>I'm new to jQuery and java and I'm really trying to get my head round creating multiple instances of a dialog box. I'm using this in the head: </p>
  
  <pre><code> &lt;script src="external/jquery/jquery.js"&gt;&lt;/script&gt;
   &lt;script src="jquery-ui.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>If I just have 1 button and and dialog box it works. But when I add another it stops working. I'm sure it will be quite easy to fix I'm just struggling. </p>
  
  <pre><code>        &lt;h2&gt;subjects&lt;/h2&gt;
  
          &lt;button id="opener"&gt;maths&lt;/button&gt;
  
          &lt;div id="dialog" title="Dialog Title"&gt;maths is an important subject.&lt;/div&gt; &lt;br&gt; 
  
        &lt;button id="opener"&gt;english&lt;/button&gt;
  
          &lt;div id="dialog" title="Dialog Title"&gt;this is also very important&lt;/div&gt; &lt;br&gt;
  
         &lt;script&gt;
  
          $( "#dialog" ).dialog({ autoOpen: false });
          $( "#opener" ).click(function() {
          $( "#dialog" ).dialog( "open" );
                                           });
          &lt;/script&gt;
  </code></pre>