jQuery Mobile 2-page Base Fiddle

HTML

<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css">
<div data-role="page" id="p1"> 
    <div  data-role="header"><h1>Header Page 1</h1></div> 
    
    <div  data-role="content"><div id="list"></div>

        <input type="button" id="load" value="load" text="load"/>    </div> 
    
    <div  data-role="footer"><h4>Footer</h4></div> 
</div> 


<div data-role="page" id="p2">
    <div  data-role="header" data-rel="back"><h1>Header Page 2</h1></div>
    
    <div  data-role="content">
        <p>This is page2</p>
    </div>
    
    <div  data-role="footer"><h4>Footer</h4></div>
</div>

JavaScript

$("#load").click(function(){
    var name=["one","two"];
    var html='<fieldset id="listPlayers" data-role="controlgroup"><legend><h1>Choose as many players as youd like to remove:</h1></legend>';
    for ( var int = 0; int < 2; int++) {
            html+='<input type="checkbox" name="checkbox-'+int+'a" id="checkbox-'+int+'a" class="custom" /><label for="checkbox-'+int+'a">'+name[int]+'</label>';
        }
        alert('<legend><h3>Choose as many players as you would like to remove:</h3></legend>'+html+'</fieldset');
        $("#list").html(html+'</fieldset');       
    //$("#list").page();
});