jQuery mobile listview and panel

Question

Basically I am designing this mobile app using jQuery mobile. I am quite new, but I've tried different ways with no success. I am trying to write the code, so that when you click on a list view item, a panel opens with the selected listview h1 (that contains the title of the list item) and p (which holds the description text enter code here). This is my HTML:

<div data-role="panel" id="event-details" data-position="right" data-theme="b" data-display="overlay">
    <h1>Hello World</h1>
</div>
<ol data-role="listview" id="show-events" data-theme="a" data-filter="true">
    <li data-name="3A Cold-rooms & Aircons" class="ui-shadow" data-icon="my-right-white">
        <a href="#event-details" class="events-list">
            <img src="img/flower.png" class="listImage" alt="" />
            <h2>3A Cold-rooms & Aircons</h2>
            <p>Patio & Outdoor Furniture</p>
            <p>GARDEN & OUTDOOR ROOMS</p>
        </a>
    </li>

There are various items in the listview.

Answer 1

$('#show-events').children('li').bind('click', function(e) {


          var htxt='<h2>' +   $(this).attr('data-name') + '</h2>';
          var ptxt='<p>' + txt + '</p>';
     var stringText =htxt+ptxt;
 $("ol#plannerList").append('<li data-icon="false" class="libgPlanner ui-shadow">' + '<a class="planner-btn" href="#map-page">' + stringText + '</a>' + '</li>').listview('refresh');

        }

    });