SO Help: Auto style checkbox with jQuery ui theme

HTML

<link rel="stylesheet" href="http://jqueryui.com/css/base.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js"></script>
<center>
    <button>Create New CheckBox</button>
</center>
<hr />
<div id="CheckBoxes">
    <input class="inp-checkbox" checked />
    <input class="inp-checkbox" />
    <input class="inp-checkbox" />
    <input class="inp-checkbox" />
</div>

CSS

.inp-checkbox {
    
}
.inp-checkbox+label {
    margin: .5em;
    width:16px; 
    height:16px; 
    vertical-align:middle;
}

JavaScript

function createCheckBox(ele, i) {
    var newID = "cbx-"+i;
    ele.attr({ "id": newID  })
        .prop({ "type": "checkbox" })
        .val(false)
        .after($("<label />").attr({ for: newID  }))
        .button({ text: false })
        .click(function(e) {
            var toConsole = $(this).button("option", {
                icons: {
                    primary: $(this)[0].checked ? "ui-icon-check" : ""
                }
            });
            
            if ($(this)[0].checked === true) {
                toConsole.val(true);   
            } else {
                toConsole.val(false);   
            }
            console.log(toConsole, toConsole[0].checked);
        });
    return ele;
}

$(function() {
    $(".inp-checkbox").each(function(i) {
            var newCheckBox = createCheckBox($(this), i);
            console.log(newCheckBox);
        });
    
    $("button").button().on("click", function(e) {
        var checkBoxCount = $("#CheckBoxes .inp-checkbox").length;
        var newCheckBox = $("<input />").addClass("inp-checkbox").appendTo($("#CheckBoxes"));
        createCheckBox(newCheckBox , checkBoxCount);
        console.log(newCheckBox);
    });
});