Edit in JSFiddle

function Product(id, description) {
    this.getId = function () {
        return id;
    };
    this.getDescription = function () {
        return description;
    };
}

function Cart(eventAggregator) {
    var items = [];

    this.addItem = function (item) {
        items.push(item);
    };
}

var products = [
new Product(1, "Star Wars Lego Ship"),
new Product(2, "Barbie Doll"),
new Product(3, "Remote Control Airplane")],
    cart = new Cart();

(function () {
    function addToCart() {
        var productId = $(this).attr('id');
        var product = $.grep(products, function (x) {
            return x.getId() == productId;
        })[0];
        cart.addItem(product);

        var newItem = $('<li></li>')
            .html(product.getDescription())
            .attr('id-cart', product.getId())
            .appendTo("#cart");
    }

    products.forEach(function (product) {
        $('<li></li>')
            .html(product.getDescription())
            .attr('id', product.getId())
            .dblclick(addToCart)
            .appendTo("#products");
    });
})();
<div class="products-wrapper">
     <h2>Products</h2>

    <ul id="products"></ul>
</div>
<div class="cart-wrapper">
     <h2>Cart</h2>

    <ul id="cart"></ul>
</div>
 ul {
     border: 1px solid black;
     width: 200px;
     min-height: 100px;
 }
 .cart-wrapper {
     float: left;
     margin-left: 20px;
 }
 .products-wrapper {
     float: left;
 }