Good way to hide some info per <li> which can be extracted during a click?
<p>I'm generating a page using jsp, it has a list element which shows a few report names. When generating the list, I'd like to hide the id of each report in the list item element so that when the user clicks that item, I can use ajax to fetch it from the server, since I know the id. What's a good way to do this such that it's easy for jquery to pick up the id on a click? Right now I have something like:</p>

<pre><code>// jsp pseudocode
&lt;ul id='reports'&gt;
    &lt;%
    for (all reports) {
        %&gt;&lt;li&gt;&lt;%= report.getTitle() %&gt;
            &lt;div class='hidden'&gt;&lt;%= report.getId() %&gt;&lt;/div&gt; // the hidden id for this item
          &lt;/li&gt;
        &lt;%
    }
&lt;/ul&gt;

// click handler for the list.
$('#reports').delegate('li', 'click', function() {
    var idOfTheClickedReport = ?;
    fetchReportById(idOfTheClickedReport);
    ...
});
</code></pre>

<p>Is there a better way to do this?</p>

<p>Thank you</p>
