title: Jquery UI - multiple dialog boxes
body: <p>I have initialized my jquery ui like this, I can get it working for one dialog box:</p>
  
  <pre><code>    &lt;script&gt;
  // increase the default animation speed to exaggerate the effect
  $.fx.speeds._default = 1000;
  $(function() {
      $( "#treatment" ).dialog({
          autoOpen: false,
          show: "blind",
          hide: "explode"
      });
  
      $( "#opener" ).click(function() {
          $( "#treatment" ).dialog( "open" );
          return false;
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>However, I have a table and for one column, 'treatments' the user has to click on "more info" to find out more, so far I have coded it like this:</p>
  
  <pre><code>        foreach($foo['MedCond'] as $row)
      { 
      ?&gt;
  
              &lt;tr&gt;
  &lt;td&gt;&lt;b&gt;Name:&lt;/b&gt;&lt;/td&gt;
  &lt;td&gt;&lt;b&gt;Symptoms:&lt;/b&gt;&lt;/td&gt;
  &lt;td&gt;&lt;b&gt;Treatment:&lt;/b&gt;&lt;/td&gt;
  &lt;td&gt;&lt;b&gt;Effective From:&lt;/b&gt;&lt;/td&gt;
  &lt;td&gt;&lt;b&gt;Effective To:&lt;/b&gt;&lt;/td&gt;
      &lt;/tr&gt;
          &lt;tr&gt;
          &lt;td&gt;&lt;?php echo $row['Name'];?&gt;&lt;/td&gt;
          &lt;td&gt;&lt;?php echo $row['Symptoms'];?&gt; &lt;/td&gt;
          &lt;td&gt;&lt;div id="treatment"&gt;&lt;p&gt;&lt;?php echo $row['Treatment'];?&gt;&lt;/p&gt;&lt;/div&gt;&lt;button id="opener"&gt;More info&lt;/button&gt;&lt;/td&gt; [...]
  </code></pre>
  
  <p>So for every row for treatments, there is a corresponding dialog open button, once they click on that, details about that particular treatment shows up. I have got this working for one, but it fails when more then one shares the same "treatment div".</p>
  
  <p>How can I get this to work.</p>
  
  <p>Cheers.</p>