JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Example 2 from <a href="">Client-side Messaging in JavaScript - Part 1 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;
}

span, div, ul, li {
    border: 1px red solid;    
}

JavaScript

$('#products li')
    .click(function () {
    var cart = $("#cart-list"),
        src = $(this),
        target = cart.find("#sel-" + src.attr('id'));
    if (target.length === 0) {
        src.clone()
            .find('span').remove().end()
            .attr('id', "sel-" + this.id)
            .append("<span class='qty'>(qty:&nbsp;<span class='qty-val'>1</span>)</span>")
            .appendTo(cart);
    } else {
        target.find('.qty-val').text(parseInt(target.find('.qty-val').text()) + 1)
    }
    var elem = $("#qty-selected");
    elem.text(parseInt(elem.text()) + 1);
});

// Separated this from the above instead of chaining so we
// could focus on the event wire-up above, separate from styling, etc.
$('#products li')
    .append("<span class='tool-tip'>click to add<span>")
    .hover(function () {
    $(this).children('.tool-tip').show();
}, function () {
    $(this).children('.tool-tip').hide()
});


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