checkbox works only after second click after search

I'm trying to create list of suppliers (checkboxes + labels) and search field to filter suppliers. I managed to get list renderered and after first load it works fine, but after I search through supplier list first click on checkbox doesn't work. I need to click twice for checkbox to become checked. screenshot

I need checkbox to become checked after first click when searching trough supplier list. Please help.

I created this fiddle here

HTML:

                    <div class="col-sm-12">
                    <div class="infoBlock suppliersWrapper">
                        <div class="blockTitle">Supplier:</div>
                        <div class="blockContent">
                          <p class="checkedSupliersTitile">Supplier list:</p>
                          <div class="row">  
                            <div class="col-sm-12 col-lg-8">                                 
                              <input type="text" class="form-control stickTop" placeholder="Search..." id="SearchSupplierInput">
                              <ul class="supplierList scrollable" id="suppliers"></ul>
                            </div>
                            <div class="col-sm-12 col-lg-4">
                                <p class="checkedSupliersTitile">Checked suppliers:</p>
                                <p class="checkedSupliersText" id="checkedSuppliers">no suppliers selected</p>
                            </div>
                          </div>
                        </div>
                    </div>
                </div>

CSS:

.supplierList label {
 color: #575757;
display: block;
font-size: 15px;
font-weight: 400;
cursor:pointer;
font-family: 'Ubuntu', sans-serif;
}

.supplierList input[type="checkbox"   ]{
width     : 2em;
margin    : 0;
padding   : 0;
font-size : 1em;
opacity   : 0;
}  

.supplierList input[type="checkbox"   ] + label{
 display      : inline-block;
 margin-left  : -1em;
 line-height  : 1.5em;
 position:relative;
 z-index: 33;
}

.supplierList input[type="checkbox"] + label::before {
border: 1px solid #d6d6d6;
border-radius: 1px;
content: "";
height: 20px;
left: -1.8em;
position: absolute;
top: 0.06em;
width: 20px;
-webkit-box-shadow: 3px 3px 0 0 rgba(25, 24, 25, 0.04) inset;
-moz-box-shadow: 3px 3px 0 0 rgba(25, 24, 25, 0.04) inset;
box-shadow: 3px 3px 0 0 rgba(25, 24, 25, 0.04) inset;
background: #ffffff;
}

.supplierList input[type="checkbox"   ]:checked + label:before{
background:#46c87c;
}

.supplierList input[type="checkbox"]:checked + label::after {
color: #fff;
content: "";
font-family: "fontawesome";
left: -1.6em;
position: absolute;
top: 0;
}

Javascript:

$(document).ready(function(){

  var SupplierList = [{"name":"125","id":"1"},
                    {"name":"2Bit Telecom Corporation","id":"2"},
                    {"name":"Alleven Telecom Corp Standart","id":"3"}];
 var selectedSuppliers = [];
// Собираем и фильтруем активных поставшиков 


renderSupplierList(SupplierList);


$("#SearchSupplierInput").on("change paste keyup", function() {
    var userInput = $(this).val();        
    var my_json = JSON.stringify(SupplierList);
    var filtered_supplierList = find_in_object(JSON.parse(my_json), {name:userInput});

    if (userInput.length >= 3){
        $("#suppliers").html("");        
        renderSupplierList(filtered_supplierList);
    }else if(!userInput){
        $("#suppliers").html("");
        renderSupplierList(SupplierList);
    }
});   

function renderSupplierList(array){
    array.forEach(function(item, i) {
        if(typeof selectedSuppliers["id"+item.id] === 'undefined'){
            var ifCheckd = "";
        }
        else{
            var ifCheckd = "checked";
        }
        $("#suppliers").append('\
                <li><span>\n\
                <input class="supplierSelect" type="checkbox" id="supplier'+i+'" ' + ifCheckd + ' name="supplier" value="'+ item.id +'"> \n\
                <label for="supplier'+i+'">'+ item.name +'</label>\n\
                </span></li>');
    });       
}

function find_in_object(my_object, my_criteria){

        return my_object.filter(function(obj) {
            //console.log(obj);
          return Object.keys(my_criteria).every(function(c) {
            //if (obj[c].search(/my_criteria[c]/i) == -1){
            if (obj[c].search(new RegExp(my_criteria[c], "i")) == -1){
                return false;
            }else{
                return true;
            }
          });
        });

    }

$('.supplierList').on('change', 'input[type=checkbox]', function(){
    supplierCheckboxChange(this);
});

function sortSingle(array, key) {
    return array.sort(function(a, b) {
        var x = a[key]; var y = b[key];
        return ((x < y) ? -1 : ((x > y) ? 1 : 0));
    });
}

function supplierCheckboxChange(currEl){
    var cText = $( currEl ).siblings("label").text();
    var cID = "id" + currEl.value;



     if(currEl.checked){
      selectedSuppliers[cID] = cText;
     }
     else{
      delete selectedSuppliers[cID];          
     }

    var tmpSuppl = [];

    for (var key in selectedSuppliers) {
        tmpSuppl.push(selectedSuppliers[key]);
    }

    tmpSuppl.sort(function(a, b) {
        var x = a.toLowerCase(); var y = b.toLowerCase();
        return ((x < y) ? -1 : ((x > y) ? 1 : 0));
    });

    var suppliers = tmpSuppl.join(', ');
    if (!suppliers){
        suppliers = "no suppliers selected";
    }

    $('#checkedSuppliers').text(suppliers);
}  

});