JSFiddle - React, Tailwind, and code Playground

HTML

<form action="addCart.php" method="get">
    <div class="cart">
        <div class="price">
            <div class="per_item">$1.00</div>
            Per Item
        </div>
        <div class="quantity">
            Qty:
            <input type="text" name="quant_1337" /><br />
            (Sub Total: $<span id="subtotal_1337">1</span>)
        </div>
        <div class="pay">
            <input type="submit" class="addCart" name="prod_1337" value="Add To Cart" />
            <label for="proc_1337"><input type="checkbox" name="proc_1337" id="proc_1337" />Proceed to checkout</label>
        </div>
    </div>
</form>

CSS

.cart{
    width: 450px;
    height: 220px;
    border: 2px dashed #000;
    position: relative;
    background: #E1E1E1;
}
.price, .quantity, .pay{
    position: absolute;
    text-align: center;
}
.price, .quantity{
    top: 0;
    width: 50%;
    height: 60%;
}
.price {
    font-weight: bold;
    font-size: 20px;
    border-right: 2px dashed #000;
}
.price .per_item{
    font-size: 30px;
    margin-top: 15%;
}
.quantity {
    padding-top: 10%;
    height: 40%;
    right:0;
}
.quantity input {
    border: #aaa solid 1px;
    font-size: 20px;
    width: 40%;
}
.quantity span{
    display: inline;
}
.pay{
    bottom: 0;
    width: 100%;
    height: 40%;
    border-top: 2px dashed #000;
}

.addCart{
    display: block;
    width: 80%;
    height: 40%;
    margin: 10px auto;
    background: url("http://www.rudsat.org/products/images/cart_icon.png") no-repeat 75% center #6D83FF; /*EXAMPLE*/
    border: #93A5FF 1px solid;
    color: #FFF;
    font-weight: bold;
    font-size: 20px;
}

JavaScript

var Products = {};
Products[1337] = {price:1, name:"..."}; /*Dyanimcally generated*/

function addCart(prodId){
    alert("Adding product "+prodId+" to cart..");
    //Pseudo code
}

$(".addCart").each(function(){
    $(this).click(function(ev){
        ev.preventDefault();
        addCart($(this).attr("name"));
    });
});
$("input[name^='quant_']").change(function(){
    var prod_id = $(this).attr("name").match(/\d+/)[0];
    var price = Products[prod_id].price;
    $("#subtotal_"+prod_id).text($(this).val() * price);
});

/*
Form submission = 
Using GET method, so that the user can bookmark their shopping cart
$_GET["quant_1337"] - quantity of product with ID 1337
$_GET["prod_1337"] - Clicked at the submit ("Add To Cart") at product 1337
$_GET["proc_1337"] - User wants to proceed to checkout
*/