How can I move a list item from one list to another?

Question

I'm using jQuery Mobile and once I click on a link from this list:

<div id="scroller">
    <div class="trans">
        <ul id="thelist" data-corners= "false" data-role="listview">
             <div class = "theListItem" data-role="collapsible-set" data-collapsed="false">
                 <li><a class= "left" data-inset="true" data-transition="pop" href="YesNoMaybe.html"><h4>Think Coffee</h4><h3>$3.50</h3></a></li>
                 <li><a class= "left" data-inset="true" data-transition="pop" href="YesNoMaybe.html"><h4>Think Coffeadsf dsadsf ads faf adsf adsf adsf sadf asdf adsfadsfadsfadsfadsf sadfasdfe</h4><h3>$3.50</h3></a></li>
                 <li><a class= "left" data-inset="true" data-transition="pop" href="YesNoMaybe.html"><h4>sup Coffee</h4><h3>$3.50</h3></a></li>
             </div>
         </ul>
    </div>
</div>

I would love if the <h4> and <h3> text replaced the text on this list:

<ul id="thelist" data-corners= "false" data-role="listview">
    <div class = "theListItem" data-role="collapsible-set" data-collapsed="false">
        <li class="purchase" ><a data-inset="true"  href="#"><h4>Think Coffee</h4><h3>$3.50</h3></a></li>               
    </div>
</ul>

I tried this:

$('#transPage').live('pageinit', function() {
$('a').click(function(){
    var $move = $(this).closest('li').appendTo("#YesNoMaybePage .theListItem");
  });
});

And got nowhere. The lists are on different pages. All advice is more than welcome. Thanks world. I owe u bigtime.

Answer 1

Try something along these lines.

$('#transPage').on('pageinit', function() {
  $('a').click(function(){
    var $h4 = $(this).find('h4').text(); // select the text of h4
    $('.purchase h4').text($h4);         // insert the text in the target

    var $h3 = $(this).find('h3').text();
    $('.purchase h3').text($h3);
  });
});

I tested it on jsFiddle and it works. http://jsfiddle.net/3JWFJ/