Kendo mvvm not updating after ajax call

I have a page (corresponding code below) that does the following:

• The user enters a value in the text field with autocomplete 2. After selecting the autocomplete option, an ajax call is made to fill 2 dropdownlists
• User must select a value from each drop-down list.
• Once the value has been selected on both, they click on the add button and the linked table is updated.
• User can delete rows added to table

The rows added in step 4 are contained in an array in the observed object. The first time the page loads points 1 through 5, as expected .....

However, if the user enters a new search in the autocomplete field and fires the select event, the second time the ajax call is made, the connection between my view model and the user interface objects is disconnected.

The code that executes is identical, so please someone shed light on why the second time around it breaks.

<input type="text" id="txtBox" style="width:300px;" />

<div id="fixturesBindable" style="padding:0 !Important;">
<table>
    <thead>
        <tr>
                        <th>Col1</th>
                        <th>Col2</th>
        </tr>
    </thead>

    <tbody data-template="row-template" data-bind="source: Fixtures"></tbody>
</table>

<select id="a_teamsdropdown" data-role="dropdownlist" data-text-field="TeamFullName" data-value-field="Id" data-bind="source: Teams" style="width:200px;"></select>
<select id="a_oppteamsdropdown" data-role="dropdownlist" data-text-field="TeamFullName" data-value-field="Id" data-bind="source: 
OpponentTeams" style="width:200px;"></select>

<button type="button" data-bind="click: addFixture">Add Fixture</button>

<script id="row-template" type="text/x-kendo-template">
<tr>
<td><input type="hidden" id="team"  data-bind="attr: { name: TeamModelName, value: TeamId }" /></td>
<td><input type="hidden" id="oppteam" data-bind="attr: { name: OppModelName, value: OppTeamId }" /></td>
</tr>
</script>

</div>


<script>
$(document).ready(function () {
        var viewModel = kendo.observable({
            Teams: <%= Model.Teams %>,
            OpponentTeams: [],
            Fixtures: [],
            addFixture: function (e) {
                var Fixtures = this.get("Fixtures");
                var teamId = $("#a_teamsdropdown").val();
                var teamName = $("#a_teamsdropdown>option:selected").text();
                var oppteamId = $("#a_oppteamsdropdown").val();
                var oppteamName = $("#a_oppteamsdropdown>option:selected").text();

                    this.get("Fixtures").push({
                        TeamFullName: teamName,
                        TeamId: teamId,
                        OppTeamFullName: oppteamName,
                        OppTeamId: oppteamId,
                        OrderIndex: this.get("Fixtures").length,
                        TeamModelName: 'Fixtures[' + this.get("Fixtures").length + '].TeamId',
                        OppModelName: 'Fixtures[' + this.get("Fixtures").length + '].OpponentTeamId'
                    });
            },
            resetFixture: function(){
                var Fixtures = this.get("Fixtures");
                $.each(Fixtures, function (key, fixture) {
                    Fixtures.splice(0, 1);
                });
            }
        });

    opponents = $("#txtBox").kendoAutoComplete({
            minLength: 3,
            dataTextField: "Name",
            filter: "contains",
            dataSource: new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "/url/Ajax",
                        type: "POST",
                        data: function () { return { searchText: $("#txtBox").val()} 
                        },
                        complete: function (data) {
                            opponents.list.width(400);
                        }
                    }
                },
                pageSize: 10,
                serverPaging: true,
                serverSorting: true,
                schema: {
                    total: "count",
                    data: "data",
                    model: {
                        id: "Id",
                        fields: {
                            Id: { editable: false }
                        }
                    }
                }
            }),
            change: function () {
                this.dataSource.read();
            },
            select: function (e) {
                $.each(opponents.dataSource.data(), function (index, value) {
                    if (e.item.text() == value.Name) {
                        selectedOpponent = value;
                        $('#Fixture_OpponentTeam_Id').val(selectedOpponent.Id);
                        $('#OpponentName').val(selectedOpponent.Name);
                        $.ajax({
                            url: 'GetOpponentTeams',
                            data: { schoolId: selectedOpponent.Id, seasonId: seasonId, sportId: sportsId },
                            type: 'GET',
                            success: function (data) {
                                viewModel.OpponentTeams = data;
                                kendo.bind($("#fixturesBindable"), viewModel);
                            },
                            error: function (xhr, ajaxOptions, thrownError) {
                                //alert('Error during process: \n' + xhr.responseText);
                                alert(thrownError);
                            }
                        });
                        return;
                    }
                });
            }

        }).data("kendoAutoComplete");
</script>