title: checkbox works only after second click after search
body: <p>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.
  <a href="https://i.stack.imgur.com/cFwAX.jpg" rel="nofollow noreferrer">screenshot</a>  </p>
  
  <p>I need checkbox to become checked after first click when searching through supplier list. Please help.</p>
  
  <p>I created this fiddle <a href="https://jsfiddle.net/nh7u4Lck/" rel="nofollow noreferrer">here</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="col-sm-12"&gt;
      &lt;div class="infoBlock suppliersWrapper"&gt;
          &lt;div class="blockTitle"&gt;Supplier:&lt;/div&gt;
          &lt;div class="blockContent"&gt;
              &lt;p class="checkedSupliersTitile"&gt;Supplier list:&lt;/p&gt;
              &lt;div class="row"&gt;  
                  &lt;div class="col-sm-12 col-lg-8"&gt;                                 
                      &lt;input type="text" class="form-control stickTop" placeholder="Search..." id="SearchSupplierInput"&gt;
                      &lt;ul class="supplierList scrollable" id="suppliers"&gt;&lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-12 col-lg-4"&gt;
                      &lt;p class="checkedSupliersTitile"&gt;Checked suppliers:&lt;/p&gt;
                      &lt;p class="checkedSupliersText" id="checkedSuppliers"&gt;no suppliers selected&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.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;
  }
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>$(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 &gt;= 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('\
                  &lt;li&gt;&lt;span&gt;\n\
                  &lt;input class="supplierSelect" type="checkbox" id="supplier'+i+'" ' + ifCheckd + ' name="supplier" value="'+ item.id +'"&gt; \n\
                  &lt;label for="supplier'+i+'"&gt;'+ item.name +'&lt;/label&gt;\n\
                  &lt;/span&gt;&lt;/li&gt;');
      });       
  }
  
  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 &lt; y) ? -1 : ((x &gt; 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 &lt; y) ? -1 : ((x &gt; y) ? 1 : 0));
          });
  
          var suppliers = tmpSuppl.join(', ');
          if (!suppliers) {
              suppliers = "no suppliers selected";
          }
  
          $('#checkedSuppliers').text(suppliers);
      }  
  
  });
  </code></pre>