Weird Behavior Of Knockout

<div id="ctlAlert" class="alert error-message">
<ul id="ctlAlertUL" data-bind="foreach: allErrors">
<li data-bind="text: $data" class="text-danger"></li>
</ul>
</div>

<button id="btnErr1">Err1</button>
<button id="btnErr2">No ERR</button>

HTML:

Script part:

<script>


        $(document).ready(function () {

var ErrorsListModel = function (items) {
        var self = this;
        self.allErrors = ko.observableArray(items);
        self.hasErrors = ko.computed(function () {
            return self.allErrors().length > 0;
        });
    }

   
    $("#btnErr1").click(function (evt)
    {
ko.cleanNode($("#ctlAlertUL")[0]);
      var rt = '["msg1", "msg2"]';
      var ve = $.parseJSON(rt);
      ko.applyBindings(new ErrorsListModel(ve), $("#ctlAlertUL")[0]);
    });


    $("#btnErr2").click(function (evt)
    {
ko.cleanNode($("#ctlAlertUL")[0]);
      var rt = '[]';
      var ve = $.parseJSON(rt);
      ko.applyBindings(new ErrorsListModel(ve), $("#ctlAlertUL")[0]);
    });

});

    </script>

Code (JavaScript):

1. When I click many times on Err1 I see MSG multiplied twice upon each click

2. When I click on NoERR I have ctlAlertUL clean, but when I click on Err1 after that I see no new MSG added

This makes me frustrating. What I'm doing wrong ?