knockout - cannot apply bindings multiple times to the same element
<p>I need to fill my trip table with data from two sources: from server using GET when the page loads (to have user's archive trips) and from observable values (when a user adds a new trip). Can I somehow merge those two scripts so that they apply bindings only once? Right now I get an error: You cannot apply bindings multiple times to the same element</p>

<pre><code>&lt;div class="panel panel-default"&gt;
  &lt;div class="panel-heading"&gt;
    &lt;h3 class="panel-title"&gt;Add a trip&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="panel-body"&gt;
    &lt;div class="form-group"&gt;
        &lt;label for="from"&gt;From&lt;/label&gt; 
        &lt;input type="text" class="form-control" id="from" name="from" placeholder="From" data-bind="value: from"&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
        &lt;label for="to"&gt;To&lt;/label&gt; 
        &lt;input type="text" class="form-control" id="to" name="to" placeholder="To" data-bind="value: to"&gt;
    &lt;/div&gt;
    &lt;a class="btn btn-primary btn-lg"  role="button" data-bind="click: add()" &gt;Add&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;


&lt;div class="panel panel-default"&gt;
    &lt;div class=panel-heading&gt;Your trips&lt;/div&gt;
    &lt;table class=table&gt;
        &lt;thead&gt;
            &lt;tr&gt;
                &lt;th&gt;From&lt;/th&gt;
                &lt;th&gt;To&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody data-bind="foreach: records"&gt;
            &lt;tr&gt;
                &lt;td data-bind="text: from"&gt;&lt;/td&gt;
                &lt;td data-bind="text: to"&gt;&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/div&gt;


&lt;script type="text/javascript" src="js/knockout-3.4.0.js"&gt;&lt;/script&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;


&lt;script type="text/javascript"&gt;
var AppViewModel = function() {
  this.from = ko.observable();
  this.to = ko.observable();
  this.records = ko.observableArray();

};
var model = new AppViewModel();


model.add = function() {
    model.records.push({ 
    from: model.from(),
    to: model.to()
  });


//sending data to server
   var data = 
            {
                from : this.from(), to : this.to(), date : this.date(),  price : this.price(), freeSeats : this.freeSeats()           
            }
            alert(data);

        $.post("/data", data, function(response)
        {

        })

}

ko.applyBindings(model);

&lt;/script&gt;

&lt;script&gt;
    function tripModel() {
        this.records = ko.observableArray([]);

        $.getJSON("/usersTrips", function(data) {

          self.records(data);

        })
    }
    ko.applyBindings(new tripModel());
&lt;/script&gt;
</code></pre>