jquery - チェックボックスを動的に追加しようとすると、UI に値が表示されませんが、コンソールには表示されます

Question

チェックボックスをその値で動的に追加しようとしています。コンソールで値を確認できます。このように、ページにチェックボックスのみが表示されています。これが私のコードです。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="row text-center" >
<div  style="width:30%;"  id="cblist" ></div>

</div>

<input type="button" value="AddCheckbox" id="btnSave" />

<script type="text/javascript">
$(document).ready(function() {
    $('#btnSave').click(function() {
        addCheckbox();
    });
});

function addCheckbox(name) {
   var container = $('#cblist');
   var inputs = container.find('input');
   var id = inputs.length+1;
   $('<input/>', { type: 'checkbox', id: 'cb'+id, value: 'cb'+id,class:'col-xs-4'}).html('hello').appendTo(container);     
}

</script>