you have to pass data in observable array like following
<script>
$(document).ready(function () {
$('#divheader').append("<h2>Please place an order</h2>");
$.ajax({
type: "Post",
url: "/Order/getData",
data: {},
success: function (data) {
function ReservationsViewModel() {
var self = this;
self.orderList = ko.observableArray([
new orderReservation(data)
]);
self.addOrder = function () {
self.orderList.push(new orderReservation(data));
}
}
function orderReservation(data) {
var self = this;
self.products = ko.observableArray(data);
self.QPU = ko.computed(function () {
return self.products().QuantityPerUnit
});
}
ko.applyBindings(new ReservationsViewModel());
}
});
});
</script>
<table>
<thead>
<tr>
<th>Product Name</th>
<th>Quantity/Unit</th>
<th>Unit Price</th>
<th>Unit in stock</th>
</tr>
</thead>
<tbody data-bind="foreach: orderList">
<tr>
<td>
<select style="width:250px;" id="ddlProduct" data-bind="options: products, optionsValue: 'ProductID', optionsText: 'ProductName', optionsCaption: 'Choose...'"></select>
</td>
<td data-bind="text: QPU"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<div>
<button data-bind="click: addOrder">Reserve another order</button>
</div></script>