Вот мой HTML:

<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>

Вот скрипт:

<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>

1. Кликаю на Err1 несколько раз и список с сообщениями разрастается.

2. Кликнул на NoERR, список очистился. После этого кликаю на Err1 — никаких сообщений больше не добавляется.

Что я делаю не так?