Dynamically populating a JQuery Mobile panel

Dynamically populating a JQuery Mobile panel

My page uses dynamically created collapsible divs based on a Category Name. The collapsible content inside the div is a 'listview' that  I populate. I need to use a dynamically updated panel, however, I do not know how to pass a variable to the panel.

The variable could be either a string or the 'listview' item itself which I could retrieve the string from the listview
item's text.

The variable will be used to update the panel information. I simply need to get the "value.name" from the active listview's  anchor and pass it to a function that populates the panel.

The code follows:
  1. // Get all business objects that match the criteria.
  2. $.each(getBusinessObjects(businesses[0], "type", categoryName), function(index, value) {
  3. $("#" + categoryName + "_list")
  4. .append("<li><a href='#infopanel' data-role='button'>" + value.name + "</a></li>");
  5. });
  6. ...
  7. /* Add dynamic content to infopanel panel.
  8. */
  9. function updateInfoPanel() {
  10. // Code to populate the panel by adding html to the infopanel id elements.
  11. // I Need to retrieve the 'value.name' text from the sending anchor.
  12. }

  1. ...
  2. <div id="infopanel" data-role="panel" data-position="right" data-display="overlay" data-theme="e" style="padding:5dp;">
  3. <!-- panel content goes here  -->
  4. <h3 id="panel_heading"></h3>
  5. <p id="panel_description"></p>
  6. <a href="#business_list_page" data-rel="close">Close panel</a>
  7. </div>
  8. ...
I am hoping there is a way to simply retrieve 'value.name' from a click on the anchor to pass to the panel's update function.

Thanks in advance for any help!