title: How can I create a unique Jquery dialog box for each item in a list?
body: <p>I'm building a browser based app in Python with the help of Jinja2 and would like to add a dialog box to each item in a list of files. For example, my Python/Jinja2 generates the following HTML:</p>
  
  <pre><code>&lt;div id="dialog"&gt;Unique data goes here.&lt;/div&gt;
  ...
  &lt;li class="ui-widget-content"&gt;something.pdf&lt;/li&gt; 
  &lt;li class="ui-widget-content"&gt;something else.zip&lt;/li&gt; 
  &lt;li class="ui-widget-content"&gt;something else(1).zip&lt;/li&gt;
  ...
  </code></pre>
  
  <p>I would like each <code>&lt;li&gt;</code> to be a call-out to the Javascript that shows the dialog box, and for each dialog box to contain unique information related to the file in the list. This list is ever-changing too. Here is the JS code I have so far, but this only brings up the first item in the list for each <code>&lt;li&gt;</code> tag:</p>
  
  <pre><code>$.fx.speeds._default = 1000;
  $(function() {
      $( "#dialog" ).dialog({
          autoOpen: false,
          show: "slide",
          hide: "fade"
      });
  });
  $(document).ready(function(){
    $("#selectable").children("li").each(function() {
        $(this).mouseover(function(){
            $(this).css("background-color","#FECA40");
        });
        $(this).mouseout(function(){
            $(this).css("background-color","white");
        });
        $(this).click(function(){
            $("#dialog").dialog( "open" );
            return false;
      });
    });
  });
  </code></pre>
  
  <p>I am very new to Javascript and am completely lost on this one. The only way I can think to accomplish this is to assign a unique <code>id</code> to each <code>&lt;div&gt;</code> and then create a corresponding function for each <code>id</code>. Since the list is upwards of 300 files, that doesn't seem too smart of an idea. What is the best way to give each <code>&lt;li&gt;</code> tag it's own unique dialog box? Thanks!</p>