JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<select data-bind="value: selectedProduct">
    <option value="">---</option>
    <option value="Ticket">Ticket</option>
    <option value="Radio ABC">Radio ABC</option>
    <option value="TV DEF">TV DEF</option>
</select>

<br /><br />
<div id="productDetails" style="border:1px solid black; border-radius: 5px; padding:5px; width:800px;" data-bind="visible: selectedProduct">
<b><span style="font-size:20px;" data-bind="text: productOverview.DeviceName"></span></b>
        <div>
            <div style="display:inline-block;">
                <img alt="" src="#" data-bind="attr: { src: productOverview.Image }" />
                <img alt="" src="http://www.jackiehunt.co.uk/oldsite/images/dynamicImages/small_noImage.gif" data-bind="visible:productOverview.Image() == '' || productOverview.Image() == null" />
            </div>
            <div style="display:inline-block; vertical-align:top;" data-bind="with:productOverview">
                Price: &euro;<label data-bind="text: Price"></label><br />
                External reference 1: <label data-bind="text: ExternalReference1"></label><br />
                External reference 2: <label data-bind="text: ExternalReference2"></label><br />
                Active: <img src="http://www.jtmmobile.com/images/icon-active.gif" data-bind="visible: IsActive()" /><img src="http://www.precociouscomic.com/common_templates/common_images/icon_x.active.jpg" data-bind="visible: !IsActive()" /><br />
                IsActive:<label data-bind="text: IsActive()"></label>
        </div>
    </div>

JavaScript

//**********MODEL********************
function ProductOverview() {
    var self = this;

    self.id = ko.observable("1");
    self.DeviceName = ko.observable("Radio ABC");
    self.Image = ko.observable();
    self.Price = ko.observable(100.0);
    self.ExternalReference1 = ko.observable("123");
    self.ExternalReference2 = ko.observable("AC256-DF");
    self.IsActive = ko.observable(true);
}

//**********VIEWMODEL****************
function productOverviewModelView() {
    var self = this;

    self.productOverview = new ProductOverview();
    self.selectedProduct = ko.observable("");
    
    //whenever the device is changed call this function
    self.selectedProduct.subscribe(function () {
        
        if (self.selectedProduct === "") {
            self.productOverview = null;
        } else {
            
            self.productOverview.DeviceName(self.selectedProduct());
        }
    });
}

//**********JQUERY*******************
$(document).ready(function () {
       ko.applyBindings(new productOverviewModelView());
});