jQM - Dynamic listview button

HTML

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width"/>
    <!-- dont know why, but if I dont put jquery-mobile script in here, jsfiddle never finds my global variable $originallist -->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3 style="white-space:normal;">
                Click to insert split-buttons after pagecreate
            </h3>
        </div>

        <div data-role="content">
            <ul data-role="listview" data-theme="a" id="mylist" data-split-icon="gear">
                <li><a href="item1.html">Item1</a></li>
                <li><a href="item2.html">item2</a></li>                
            </ul>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>   
</body>
</html>

JavaScript

$(document).ready( function() {
    
});
$(document).on('pagecreate', '#index', function(){
        alert('Follow list evolution at console output');
        //save original list 
        //global variable $originallist (dont use var here, so it will be global)
        $originallist = $('#mylist').clone();
        console.log('original list:\n' + $originallist.html());
});

$("div[data-role='header']").on('click', function(){    
    //recover the originallist for editing
    var editlist = $originallist.clone();
    //add a new listview element
    editlist.append('<li><a href="item3.html">Item3</a></li>');
    //add split-buttons for all itens
    editlist.find('li').append("<a href='#'>gear</a>");
    //log the edited list
    console.log('edited list:\n' + editlist.html());
    // alter list html
    $('#mylist').html( editlist.html() );
    // re-enhance the list
    $('#mylist').listview('refresh');
    console.log('enhanced list:\n' + $('#mylist').html());
    
});