SO Help: Auto style checkbox with jQuery ui theme

HTML

<center>
    <button>Create New CheckBox</button>
</center>
<hr />
<div id="CheckBoxes">
    <input class="inp-checkbox" />
    <input class="inp-checkbox" />
    <input class="inp-checkbox" />
    <input class="inp-checkbox" />
</div>

















































































<!--    Strictly for Theme Changer (Nothing to do with Accordion)    -->
<div id="ThemeSwitcher" class="ui-widget ui-widget-content ui-corner-top" style="text-align: center;">
	<label for="selTheme" class="ui-widget-header ui-corner-all" style="padding: .1em .5em;">Select Theme</label>
	<select id="selTheme" name="selTheme" class="ui-widget ui-corner-all">
		<option value="base">base</option>
		<option value="black-tie">black-tie</option>
		<option value="blitzer">blitzer</option>
		<option value="cupertino">cupertino</option>
		<option value="dark-hive">dark-hive</option>
		<option value="dot-luv">dot-luv</option>
		<option value="eggplant">eggplant</option>
		<option value="excite-bike">excite-bike</option>
		<option value="flick">flick</option>
		<option value="hot-sneaks">hot-sneaks</option>
		<option value="humanity">humanity</option>
		<option value="le-frog">le-frog</option>
		<option value="mint-choc">mint-choc</option>
		<option value="overcast">overcast</option>
		<option value="pepper-grinder">pepper-grinder</option>
		<option value="redmond">redmond</option>
		<option value="smoothness">smoothness</option>
		<option value="south-street">south-street</option>
		<option value="start">start</option>
		<option value="sunny">sunny</option>
		<option value="swanky-purse">swanky-purse</option>
		<option value="trontastic">trontastic</option>
		<option value="ui-darkness">ui-darkness</option>
		<option value="ui-lightness">ui-lightness</option>
		<option value="vader">vader</option>
	</select>
</div>
<!--    END Theme Changer (ACORDION HTML BELOW)     -->

CSS

.inp-checkbox {
    
}
.inp-checkbox+label {
    margin: .5em;
    width:16px; 
    height:16px; 
    vertical-align:middle;
}
#CheckBoxes .ui-button .ui-button-text {
    background: #A9A9A9;
    display: inline;
    font-size: 16px;
    left: 19px;
    padding: 0;
    position: relative;
    text-indent: 0;
    top: -4px;
}















































































/*  Theme Switcher CSS  */
#ThemeSwitcher {
    background: #f1da36;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YxZGEzNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZWZjZWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #f1da36 0%, #fefcea 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1da36), color-stop(100%,#fefcea));
    background: -webkit-linear-gradient(top,  #f1da36 0%,#fefcea 100%);
    background: -o-linear-gradient(top,  #f1da36 0%,#fefcea 100%);
    background: -ms-linear-gradient(top,  #f1da36 0%,#fefcea 100%);
    background: linear-gradient(to bottom,  #f1da36 0%,#fefcea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1da36', endColorstr='#fefcea',GradientType=0 );

    border-bottom: none !important;
    bottom: 0em;
    left: 50%;
    margin-left: -10em;
    padding: .5em .5em .25em;
    position: fixed;
    z-index: 999;
}
#ThemeSwitcher select { outline: 0 !important; }

JavaScript

function createCheckBox(ele, i) {
    var newID = "cbx-"+i,
        wrapper = $('<div />').appendTo('#CheckBoxes');
    ele.appendTo(wrapper)
        .attr({ "id": newID  })
        .prop({ "type": "checkbox" })
    .after($("<label />", { for: newID, text: 'Bleh' }))
        .button({ text: false })
        .change(function(e) {
            var toConsole = $(this).button("option", {
                icons: {
                    primary: $(this)[0].checked ? "ui-icon-check" : ""
                }
            });
            //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);
    });
});

















































































/*    Strictly for Them Selector (Nothing to do with accordion)    */
var tmrThemSwitcher;
$("#ThemeSwitcher").on("mouseenter", function(e) {
    clearTimeout(tmrThemSwitcher);
    $(this).animate({ bottom: "0em" });
})
.on("mouseleave", function(e) {
    tmrThemSwitcher = setTimeout(function() { $("#ThemeSwitcher").animate({ bottom: "-2em" }); }, 1000);
});
$("select").change(function(e) {
	var thmURL = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/{theme}/jquery-ui.css".replace("{theme}", $(this).val()),
		thmLink = $("<link />", { id: "ui-theme-link", href: thmURL, rel: "stylesheet", type: "text/css" });
	$("head").append(thmLink);
	$("head .ui-theme-link").first().remove();
}).children("[value=hot-sneaks]").prop("selected", true).change();
/*    --    --    --    --    --    --    --    --   ...