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.

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

  5. </head>

  6. <!DOCTYPE html> 
  7.  
  8. <html> 
  9.  
  10. <head> 
  11. <meta charset="utf-8"> 

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

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

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

  25.     <button id="fav1" data-inline="true" data-theme="a" data-icon="star">Fav1</button>
  26. <button id="fav2" data-inline="true" data-theme="a" data-icon="star">Fav2</button>
  27.     <button id="fav3" data-inline="true" data-theme="a" data-icon="star">Fav3</button>
  28. <button id="fav4" data-inline="true" data-theme="a" data-icon="star">Fav4</button>
  29.     <button id="fav5" data-inline="true" data-theme="a" data-icon="star">Fav5</button>
  30. <button id="fav6" data-inline="true" data-theme="a" data-icon="star">Fav6</button>
  31.      <button id="fav7" data-inline="true" data-theme="a" data-icon="star">Fav7</button>
  32. <button id="fav8" data-inline="true" data-theme="a" data-icon="star">Fav8</button>
  33. <ol>
  34.     <li></li>
  35.     </ol>
  36. </div>


  37. <div data-role="page" id="sendFavourites">
  38. <script>
  39.   $(document).ready(function(){
  40.   $("#fav1").click(function(){
  41.     $("ol").append(" <li>Add Fav 1</li>");
  42.   });
  43.   $("#fav2").click(function(){
  44.     $("ol").append(" <li>Add Fav 2</li>");
  45.   });
  46.   $("#fav3").click(function(){
  47.     $("ol").append(" <li>Add Fav 3</li>");
  48.   });
  49.   $("#fav4").click(function(){
  50.     $("ol").append(" <li>Add Fav 4</li>");
  51.   });
  52.   $("#fav5").click(function(){
  53.     $("ol").append(" <li>Add Fav 5</li>");
  54.   });
  55.   $("#fav6").click(function(){
  56.     $("ol").append(" <li>Add Fav 6</li>");
  57.   });
  58.   $("#fav7").click(function(){
  59.     $("ol").append(" <li>Add Fav 7</li>");
  60.   });
  61.   $("#fav8").click(function(){
  62.     $("ol").append(" <li>Add Fav 8</li>");
  63.   });
  64.   });
  65. </script>
  66.     
  67. </div>

  68. </body>
  69. </html>

Any help on this, I would be grateful,

Regards