Event handler for dynamically created checkboxes doesn't work

Event handler for dynamically created checkboxes doesn't work

I want to use my own event handler for all five checkboxes.
I create one checkbox in the code and then clone it four times.

My problems with this code: I can check and uncheck the first checkbox (the checkbox in the code).
But the first checkbox doesn't use my event handler but its own (I set a breakpoint in my
"$('input:checkbox').live('click', function (event) {..." code and it is never reached if I click the first checkbox.
The four other boxes reach my event handler but all four get checked if I click only at one.
And I can only check the four boxes if the first box (the one in the code) is checked and I can only uncheck them if the first box is unchecked. There seems to be a lot of side effects I don't understand.
This is the full code:
  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <title>My Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
    <script src="jquery-1.7.2.min.js"></script>
    <script src="jquery.mobile-1.1.1.min.js"></script>
    </head>
    <body onfocus="readvalues()">
    <div id="mypage" data-role="page" data-theme="a">
    <script>
    $(document).ready(function () {
       $('input:checkbox').live('click', function (event) {       
        event.preventDefault();
        event.stopPropagation();
        if ($(this).prop('checked')) {
             $(this).prop('checked', false);
             //$(this).removeAttr('checked');
             $(this).checkboxradio("refresh");
             //$(this).attr("checked",false).checkboxradio("refresh");
         } else {
             $(this).prop('checked', true);    
             //$(this).attr('checked', true);
             $(this).checkboxradio("refresh");
         }
         //$(this).prop('checked', true);    
         //$(this).attr('checked', true).checkboxradio('refresh');
         $(this).checkboxradio("refresh");
         //$(selector).trigger('create');    
       });
    });    
    </script>

      <div data-role="fieldcontain" id="fieldcontainid">
        <fieldset data-role="controlgroup" id="fieldsetid">
           <div id="sample">
           <input id="checkboxsample" class="custom" type="checkbox" data-iconpos="left" name="checkboxsample">
           <label id="labelsample" for="checkboxsample">Test</label>
           </div>
           <div id="existing"></div>
        </fieldset>
      </div>
    <script>
    readvalues = function()
    {

        var existing = document.getElementById('existing');
        existing.textContent = '';
        
        for (i=0; i<=3; i++)  
        {  
            var clonecheckbox = $("#sample").clone(false);
            $("#existing").append(clonecheckbox);
            clonecheckbox.attr("id",i.toString());
            $("#"+i.toString()).children().children().eq(0).attr("id","cb"+i.toString());
            $("#"+i.toString()).children().children().eq(0).attr("name","cb"+i.toString());
           
            $("#"+i.toString()).children().children().eq(1).attr("id","label"+i.toString());
            $("#"+i.toString()).children().children().eq(1).attr("for","cb"+i.toString());
        }
    }
    </script>
    </div>
    </body>
    </html>





































































What changes have I to do in my code to use my own event handler four all five checkboxes?
Is my event handling to check/uncheck checkboxes correct?