JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Example 1 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 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;
}

JavaScript

$('#products li')
    .click(function() {
        $(this).clone()
               .find('span').remove().end()
               .appendTo($("#cart-list"));
    });

// 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();
});