How do I loop through attr("rel") to get the one I selected.

How do I loop through attr("rel") to get the one I selected.

I have a dynamic div create an image click or ipad tap. 

  2.   $("#pgNum").live("click, tap", function () {
  3.                 var v = $("#book").turn("view");
  4.                 var rel = $("#pgNum").attr("rel");
  5.                 var spl = rel.split("x");
  6.                 var pgClicked = parseFloat(spl[0]);
  7.                 $("#book").turn("page", parseInt(pgClicked));
  8.                 $("#ContentTitle").fadeOut(1000);
  9.                 $("#CView").val(v[0] + " - " + v[1]);
  10.             });
My c# code loads the a table of contents from the databases and put them into this:

  1. <div id="contents" class="clscontents" rel="1 Front Cover">
  2. <ul>
  3. <li> <a href="#" id="pgNum" rel="1 Front Cover"></a>l</i>
  4. <li> <a href="#" id="pgNum" rel="2 IFC"></a>l</i>
  5. <li> <a href="#" id="pgNum" rel="3 Table of Contents"></a>l</i>
  6. <li> <a href="#" id="pgNum" rel="6 Visual Index"></a>l</i>
  7. <li> <a href="#" id="pgNum" rel="24 Layering Light"></a>l</i>
  8. <li> <a href="#" id="pgNum" rel="28 Clearing Crystal"></a>l</i>
  9. </ul>
  10. </div>
What I need is when a user chooses a page to go like 28 Clearing Crystal goto page 28 or if 6 Visual Index goto page 6.With code below and above which is the same code it only goto page 1 no matter what page I click.  
  2.   $("#pgNum").live("click, tap", function () {
  3.                 var v = $("#book").turn("view");
  4.                 var rel = $("#pgNum").attr("rel");
  5.                 var spl = rel.split("x");
  6.                 var pgClicked = parseFloat(spl[0]);
  7.                 $("#book").turn("page", parseInt(pgClicked));
  8.                 $("#ContentTitle").fadeOut(1000);
  9.                 $("#CView").val(v[0] + " - " + v[1]);
  10.             });
somehow I need to loop and what was selected = pgClicked 

thank you in advance.