javascript - リスト項目とjquery

Question

私はここにこのコードを持っています: codepen リンク

基本的に、リスト項目が反応すべき方法は、追加された新しい項目 (チェックボックスが表示されているもの) が、既に配置されているリスト項目 (クリックすると背景が変わるもの) のようになることです。カウントも上がるはずです。他のコードと同じように書かれているため、現在の方法が機能しない理由がわかりません...

コード：

HTML:

<div class='navbar navbar-fixed-bottom'>
            <div class='col-lg-3 col-offset-2 pull-left'>
                <form class="navbar-form pull-left">
                    <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
                        <input type="text" class="form-control" name="filtr" id="filtr" placeholder="Search..">
                    </div>
                </form>
            </div>
            <div class='container'>
                <a class='navbar-brand' href='#'></a>
                <ul class='nav navbar-nav pull-right'>
                    <li><a href='#' class='count'><strong>0</strong></a></li>
                    <li><a href='#'><i class="glyphicon glyphicon-align-justify"></i></a></li>
                    <li><a href='#'>Next Step <i class="glyphicon glyphicon-chevron-right v-align-middle"></i></a></li>
                </ul>
            </div>
        </div>
        <div class='contains'>
            <ul class='list-unstyled' id="productlist">
                <label for="addbox"><li class="products" id="addbox">+ NON-STOCKED ITEM</li></label>
                <label for="nonitem"><li class='products NON-STOCKED0'>NON-STOCKED ITEM<input class="hide" type="checkbox" id="nonitem" value="NON-STOCKED ITEM"><span class='selectedbox pull-right large-icon'><i class="glyphicon glyphicon-ok"></i></span></li></label>
                    <span id='newbox'></span>
            </ul>
    </div>

JQuery:

$(function(){ 
                var count = 0;
                var newdiv = $("#newbox");
                var nonitem = $("#nonitem")
                var a = $(nonitem).size() + 1;
                var b = $(nonitem).size() + 1;

                a = a -1;
                b = b -1;

                $("#addbox").click(function(){
                    $("<label for='nonitem"+a+"' id='chk'><li class='products NON-STOCKED'>NON-STOCKED ITEM<input class='' type='checkbox' id='nonitem"+b+"' value='NON-STOCKED ITEM'></li></label>").appendTo(newdiv);
                    a++;
                    b++;
                    return false;
                });

                $("input[type='checkbox']").click(function(){
                    $(this).parent().toggleClass("backchange");
                    $(this).next(".selectedbox").fadeToggle();
                    var check = this.checked? 1 : -1;
                    count = count + check;
                    $(".count").text(count);
                    if(count >= 1){
                        $(".clearall").fadeIn();
                        $(".count").addClass("countplus");
                    }else{
                        $(".clearall").fadeOut();
                        $(".count").removeClass("countplus");
                    }
                });
            });