浮动标签不适用于追加

Question

我正在使用浮动标签并在单击按钮时添加新项目。 但添加时，添加了字段浮动标签，停止运行。有人能帮助我吗？

HTML：

<div class="col-md-12 campos-cnpj--blocos">
  <div class="col-md-3">
   <div class="form-group floatl">
     <label class="floatl__label">CNPJ</label>
     <input type="text" placeholder="CNPJ" class="form-control floatl__input" value="0000000000">
   </div>
  <button class="btn-action-blue btn-add-ref">+</button>
  <button class="btn-action-blue btn-sub-ref">-</button>
 </div>

JQUERY

  (function cnpjBlocos(){

  $('.campos-cnpj--blocos').on('click' , '.btn-add-ref', function(e){
  var $floatLabel = "floatl__label"; 
  var $floatInput = "floatl__input";
  var $floatL = "floatl";

  $('.campos-cnpj--blocos').append(
  '<div class="col-md-3">' +
    '<div class="form-group '+$floatL+'">' +
      '<label class="'+$floatLabel+'">CNPJ</label>' +
      '<input type="text" placeholder="CNPJ" class="form-control '+$floatInput+'">' +
    '</div>' +
    '<button class="btn-action-blue btn-add-ref">+</button>' +
    '<button class="btn-action-blue btn-sub-ref">-</button>' +
  '</div>'
);
$(this).next('.btn-sub-ref').show();
$(this).hide();

$('.campos-cnpj--blocos').on('click', '.btn-sub-ref', function(e){
  $(this).closest('.col-md-3').hide();
  e.preventDefault();
  console.log(numberRef);
});

e.preventDefault();
});  
})();