JSFiddle - React, Tailwind, and code Playground

by btipling

HTML

<div id="shoppingCart"></div>
<div id="shelf">
    <div class="iPhone6 smartphone">iPhone 6</div>
    <div class="galaxyS5 smartphone">Galaxy S5</div>
    <div class="motoX smartphone">Moto X</div>
    <div class="stylus accessory">stylus</div>
    <div class="case accessory">case</div>
</div>

CSS

#shoppingCart, #shelf {
    padding: 5px;
    margin: 5px;
    float: left;
    width: 150px;
    border: 1px solid gray;
}

JavaScript

var prices, shoppingCart = new WeakMap();

prices = new Map([
    ["smartphone", new Map([
        ["iPhone6", 610],
        ["galaxyS5", 650],
        ["motoX", 179],
    ])],
    ["accessory", new Map([
        ["stylus", 20],
        ["case", 40],
    ])],
]);


function getProductFromShelf(type) {
    var shelfEl, shoppingCartEl, productEl, clone, price;
    shelfEl = document.getElementById("shelf");
    shoppingCartEl = document.getElementById("shoppingCart");
    productEl = shelf.querySelector(`.${type}`);
    price = prices.get(productEl.classList[1]).get(type);
    clone = productEl.cloneNode(true);
    shoppingCartEl.appendChild(clone);
    shoppingCart.set(clone, price);
}

getProductFromShelf("iPhone6");