JSFiddle - React, Tailwind, and code Playground

by stofke

HTML

<div id="navcontainer">
    <ul id="navlist">
        <li><a href="#" class="current">Item one</a></li>
        <li><a href="#">Item two</a></li>
    </ul>
</div>
<div class="box">
    <h2>Stock of item one</h2>
    <select id="items" size="5" width="50px">
    </select>
</div>

CSS

a {
    font: bold 100% "Lucida Grande", Lucida, Verdana, sans-serif;
}
#navlist li
{
    display: inline;
    list-style-type: none;
    padding-right: 5px;
    
}

#navlist li a.current
{
    font-weight: bold;
}
h2
{
    text-decoration: underline;
    color: #555;
    font: bold 120% "Lucida Grande", Lucida, Verdana, sans-serif;
    margin-top:30px;
    margin-bottom:15px;
}
.box {
    float:left;
    margin-left:5px;
}
.clear {
    clear:both;
}

JavaScript

$(function() {
    var stockItems = {
        "Item one": 2,
        "Item two": 5
    }; //stock object
    var cartItems = {
        "Item one": 0,
        "Item two": 0
    }; //cart object
    var originalItems = {
        "Item one": 2,
        "Item two": 5
    }; //items object
    $("#navlist li a").click(function() {
        $('#items option').remove(); //reset the stock dropdownlist on click
        var itemName; //name of the item
        var total_stockItems = stockItems[$(this).text()]; //get total stockitems for an item
        for (i = 1; i <= stockItems[$(this).text()]; i++) {
            $("#items").append($("<option></option>").val(i).html(i)); //build the stock dropdown
        }
        return false;
    });
});