JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://qtip2.com/v/stable/jquery.qtip.min.js"></script>
<link rel="stylesheet" href="http://qtip2.com/v/stable/jquery.qtip.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://knockoutjs.com/downloads/knockout-2.3.0.js"></script>
<div class="container">
    <!-- ko if: isAdded -->
    <button class="btn primary" data-bind="click: add">Add Xbox 360</button>
    <!-- /ko -->
    
    <!-- ko ifnot: isAdded -->
    <button class="btn btn-success primary remove" data-bind="click: remove">Xbox 360 already added</button>
    <!-- /ko -->
</div>

CSS

.container {
    margin: 25px;
}

JavaScript

$("button.remove").hover(function() {
    $(this)
    .removeClass("btn-success")
    .addClass("btn-danger")
    .text("Click here to remove");
}, function() {
    $(this)
    .removeClass("btn-danger")
    .addClass("btn-success")
    .text("Xbox 360 already added");
});

ViewModel = function() {
    var self = this;
    
    self.isAdded = ko.observable(false);
    
    self.add = function(item) {
        item.isAdded(false);
    };
    
    self.remove = function(item) {
        item.isAdded(true);
    };
};

ko.applyBindings(new ViewModel());