//used to show and hide the products
function showProduct(id) {
    var div = document.getElementById("product" + id);
    if (div) {
        //check if already showing to prevent flickering.
        if (div.style.display == "block") {
            return;
        }
        else {
            hideProduct();
            div.style.display = "block";
        }
    }
}

function hideProduct() {
    for (var i = 1; i <= 20; i++) {
        var div = document.getElementById("product" + i);
        if (div) {
            div.style.display = "none";
        }
    }
}