Get specific XML element from loop

So I have a loop that posts television programs. I would like to know how to click a specific television show and have the description of the program show up in a div but I think the loop makes this difficult.

An onclick needs to be added to the prog div that will show the description of that program in another div somewhere else on the page however I don't know how to tell the code which program has been selected after using a loop.

Perhaps it could read the name from the paragraph and compare it with the xml some how? Thank you

This is the script.

    var listings = new Array(); 
        var channel = [];
        var description=[];
        var shows = new Array();
        var showLen = new Array();
        var info = new Array();
        var day;
        var chList = new Array();
        var showLenList = new Array();
      var containerId = '#container';
      var tabsId = '#tabs';

      $(document).ready(function(){
         // Load the tabs on page load
         if($(tabsId + ' LI.current A').length > 0){
            loadTab($(tabsId + ' LI.current A'));
         }

           function parse(document){
            var d = getParameterByName("day"); 
          $(document).find('day[name="'+d+'"]').each(function(){ //this reads through the XML and reads each day

              $(this).find('channel').each(function(){ //this reads each channel within each day in the XML
              shows = []; //this clears the show array
              showLen = []; //this clears the length of the show array

              info = []; //this clears the show array

              var ch = $(this).attr('name');  // sets the variable 'ch' as the name of the channel
              chList.push(ch); //add this channel to the list of channels
                  $(this).find('channel[name="'+ch+'"] > programme').each(function() {          // this reads each program within the channel   
                    var duration = ($(this).attr('end') - $(this).attr('start')) * 100; //calculates the time between the start and end of the show
                    showLen.push(duration); //this stores the programme time in the showLen array
                    shows.push($(this).attr('name')); // this adds the programme name to the shows array
                    info.push($(this).attr('desc')); // this adds the programme name to the shows array
                  });
                  channel[ch]=shows; // adds the list of shows to a channel
                  description[ch]=info; // adds the list of shows to a channel
                 showLenList[ch]=showLen; //adds the list of show durations to a channel
              });
          });

          for (var i = 0; i< chList.length; i++){ //this reads through the list of channels
          $("#chCol").append('<div id="ch">'+ chList[i] +'</div>'); //this will add a div in the channel column for each channel name

                for (var x = 0; x<description[chList[i]].length; x++){ //this will go through the list of shows which correspond to the current channel 
                $("#timeline").append('<div id="prog" title="'+ description[chList[i]][x] +'" style="width:'+ showLenList[chList[i]][x] +'px;"><p>' + channel[chList[i]][x] + '</p></div>' ); //creates a div containing the name of each show and using the durations(times of the show) to define the width of the div
                }
            $("#timeline").append('</div>');    //this will add the div to the timeline 
          }

        }

          $.ajax({
            url: 'test.xml', 
            dataType: "xml",
            success: parse,
            error: function(){alert("Unable to open file");}
          });

});'