title: Moving rendered elements of a new html page
body: <p>I have a Javascript function I'm rendering on a page where the user can click on a list element and it will bring them to a new page showing more information about that list element. The original page is #index and the second page is #index2 which is coded using one multipage HTML page. 
  However I am hoping that I can move the index2 page to its own html file - index2.html but I'm not sure how I can reference the new index.html file within the function so that the elements can move to the new file. </p>
  
  <p>My code is as follows: </p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
      $(document).on('pagebeforeshow', '#index', function(){
          $("#list").empty();
          var url="http://localhost/tmp/json4.php";
          $.getJSON(url,function(json){
              //loop through deals
              $.each(json.deals,function(i,dat){
                  $("#list").append("&lt;li&gt;&lt;a id='"+dat.dealid+"' data-restaurantid=" + dat.restaurantid + " data-image=" + dat.image + "&gt;&lt;h1&gt;"+dat.name+"&lt;/h1&gt;&lt;h6&gt;"+dat.dname+"&lt;/h6&gt;&lt;h5&gt;"+dat.description+"&lt;/h5&gt;&lt;/a&gt;&lt;/li&gt;");
                  $(document).on('click', '#'+dat.dealid, function(event){  
                      if(event.handled !== true) 
                      {
                          dealObject.dealID = $(this).attr('id'); 
                          dealObject.restaurantid = $(this).attr('data-restaurantid');
                          dealObject.shortName = $(this).find('h1').html(); 
                          dealObject.image = $(this).attr('data-image');
                          dealObject.dealName = $(this).find('h6').html();
                          dealObject.description = $(this).find('h5').html(); 
  
                          $.mobile.changePage( "#index2", { transition: "slide"} );
                          event.handled = true;
                      }
                  });            
              });
              $("#list").listview('refresh');
          });
      });
  
      $(document).on('pagebeforeshow', '#index2', function(){       
          $('#index2 [data-role="content"]').find('#deal-img').attr('src',dealObject.dealObject);
          $('#index2 [data-role="content"]').find('#title').html(dealObject.name);
                  $('#index2 [data-role="content"]').find('input#desc').val(dealObject.description);
                  $('#index2 [data-role="content"]').find('input#tname').val(dealObject.dealName);
                  $('#index2 [data-role="content"]').find('input#dealid').val(dealObject.dealID);
  
  
      });
  
      var dealObject = {
          dealID : null,
          restaurantid : null,
          shortName : null,
          image : null,
          dealName : null,
          description: null
      }    
  &lt;/script&gt;
  </code></pre>
  
  <p>If somebody could help me I'd really appreciate it. </p>