JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<script src="https://github.com/ifandelse/postal.js/raw/master/lib/browser/standard/postal.js"></script>
<script src="https://github.com/ifandelse/postal.js/raw/master/lib/browser/standard/postal.diagnostics.js"></script>
<h3>Example 1 from <a target="_blank" href="http://freshbrewedcode.com/jimcowart/2012/01/20/client-side-messaging-in-javascript-part-2-postal-js/">Client-side Messaging in JavaScript - Part 2 of a series on Postal.js</a></h3>
<h4>A Contrived Shopping Cart</h4>
<div class="products-wrapper">
    <div class="header">Products</div>
    <ul id="products">
        <li id="product1">Item 1</li>
        <li id="product2">Item 2</li>
        <li id="product3">Item 3</li>
        <li id="product4">Item 4</li>
        <li id="product5">Item 5</li>
    </ul>
</div>


<div class="cart-wrapper">
    <div class="header">Shopping Cart</div>
    <ul id="cart-list">
        
    </ul>
</div>

<div class="summary">
    <div class="header">Summary</div>
    <div class="msg">
        <span id="qty-selected">0</span> item(s) selected.
    </div>
</div>

<div id="ctrls">
    <input type="button" value="Start over" id="reset">
</div>

CSS

body {
    font-family: Tahoma, Arial, sans-serif;
}

h3 {
    margin-bottom: 10px;   
}

h4 {
    text-align: center;
    width:410px;
    margin-bottom:15px;
}

.products-wrapper {
    float:left;
    margin-right: 10px;
    width:200px;
    margin-bottom: 25px;
}

#products li {
    margin-left: 5px;
}

.tool-tip {
    display: none;
    font-style: italic;
    color: silver;
    font-size: 10pt;
    float: right;
    margin-right: 5px;
}

.qty {
    font-style: italic;
    color: dimGray;
    float: right;
    margin-right: 5px;
}

.cart-wrapper {  
    float:left;
    width: 200px;
    
}

.header {
    background-color: lightsteelblue;
    text-align: center;   
    font-size: 14pt;
    border-radius: 5px;
    padding: 2px;
    font-variant: small-caps;
}

#ctrls {
    clear:both;  
    text-align: center; 
    width: 410px;
}

#ctrls input[type=button] {
    margin: 5px;
    padding: 5px;
    width: 100px;
}

.summary {
    clear:both;
    width:410px;
    text-align: center;
    margin-bottom: 10px;
}

.summary .msg {
    padding: 5px;
}

JavaScript

postal.subscribe( "reset", function() {
    $( "#cart-list" ).children().remove();
    $( "#qty-selected" ).text( 0 );
});

postal.subscribe( "itemSelected", function( msg ) {
    var cart = $( msg.cartSelector ),
        target = cart.find( msg.targetSelector ),
        elem = $( "#qty-selected" ),
        qtyval;
        if( target.length === 0 ) {
            msg.src.clone()
               .find( 'span' ).remove().end()
               .attr( 'id', "sel-" + msg.id )
                .append( "<span class='qty'>(qty:&nbsp;<span class='qty-val'>1</span>)</span>" )
               .appendTo( cart );
        }
        else {
            qtyval = target.find( '.qty-val' );
            qtyval.text( parseInt( qtyval.text() ) + 1, 10 ); 
        }
    
    elem.text( parseInt( elem.text() ) + 1, 10 );
});

$( document ).delegate( '#products li', 'click', function() {
        var src = $( this ),
            id = src.attr( 'id' );        
        postal.publish( "itemSelected", {
            id: id,
            targetSelector: "#sel-" + id,
            cartSelector: "#cart-list",
            src: src
        });
    });

$(document).delegate( "#reset", 'click', function() {
    postal.publish( "reset", {} );
});

$( '#products li' )
    .append( "<span class='tool-tip'>click to add<span>" )
    .hover( function( e ) {
       $( this ).children( ".tool-tip" ).toggle( e.type === "mouseenter" );
    });