Append - HELP

Append - HELP

Hey Guys,  I am having a small issue with using the append function.

My problem is I am trying to implement a favourites category  on my jQuery Mobile website. I am using append to add to the favourites list. The problem is I have 2 different pages for the favourite function, when I click on a favourite button from the first page which I will call 'buy' the favourites should be added to a new page called 'sendFavourites'. This is what I have come up with I'm not sure why this isn't sending to the 'sendFavourites' page.

The Send button will lead to the 'sendFavourites' page where there needs to be a form presented in order for the customer to be able to send the favourites to their email.

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  7. </head>

  9. <!DOCTYPE html> 
  10.  
  11. <html> 
  12.  
  13. <head> 
  14. <meta charset="utf-8"> 

  16. <meta name="viewport" content="width=device-width, initial-scale=1"> 

  18. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> 
  19. <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
  20. <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 
  21.     
  22.     <link rel="stylesheet" href="css/style.css" media="screen" />
  24. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  25.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  26.  
  27. </head> 
  28. <body>

  30. <div data-role="page" id="buy">
  31. <a href="#sendFavourites" data-role="button" data-inline="true" >Send</a>

  33.     <button id="fav1" data-inline="true" data-theme="a" data-icon="star">Fav1</button>
  34. <button id="fav2" data-inline="true" data-theme="a" data-icon="star">Fav2</button>
  35.     <button id="fav3" data-inline="true" data-theme="a" data-icon="star">Fav3</button>
  36. <button id="fav4" data-inline="true" data-theme="a" data-icon="star">Fav4</button>
  37.     <button id="fav5" data-inline="true" data-theme="a" data-icon="star">Fav5</button>
  38. <button id="fav6" data-inline="true" data-theme="a" data-icon="star">Fav6</button>
  39.      <button id="fav7" data-inline="true" data-theme="a" data-icon="star">Fav7</button>
  40. <button id="fav8" data-inline="true" data-theme="a" data-icon="star">Fav8</button>
  41. <ol>
  42.     <li></li>
  43.     </ol>
  44. </div>


  47. <div data-role="page" id="sendFavourites">
  48. <script>
  49.   $(document).ready(function(){
  50.   $("#fav1").click(function(){
  51.     $("ol").append(" <li>Add Fav 1</li>");
  52.   });
  53.   $("#fav2").click(function(){
  54.     $("ol").append(" <li>Add Fav 2</li>");
  55.   });
  56.   $("#fav3").click(function(){
  57.     $("ol").append(" <li>Add Fav 3</li>");
  58.   });
  59.   $("#fav4").click(function(){
  60.     $("ol").append(" <li>Add Fav 4</li>");
  61.   });
  62.   $("#fav5").click(function(){
  63.     $("ol").append(" <li>Add Fav 5</li>");
  64.   });
  65.   $("#fav6").click(function(){
  66.     $("ol").append(" <li>Add Fav 6</li>");
  67.   });
  68.   $("#fav7").click(function(){
  69.     $("ol").append(" <li>Add Fav 7</li>");
  70.   });
  71.   $("#fav8").click(function(){
  72.     $("ol").append(" <li>Add Fav 8</li>");
  73.   });
  74.   });
  75. </script>
  76.     
  77. </div>

  79. </body>
  80. </html>
Any help on this, I would be grateful,

Regards