Untitled

#pojemnik1
{
    position: relative;
    width: 1000px;
    margin: auto;
}
#nawigacja
{
    margin-top: 1px;
    padding: 5px;
}
#nawigacja div img
{
    width: 30px;
    min-height: 30px;
}
#nawigacja div:first-child
{
    position: absolute;
    left: 35px;
}
#nawigacja div:last-child
{
    position: absolute;
    right: 0px;
}
#pojemnik2
{
    text-align: center;
    margin-top: 50px;
    min-height: 500px;
}
#pojemnik2 p
{
    position: absolute;
    width: 100%;
}
#pojemnik2 img
{
    height: 100px;
    max-width: 150px;
    margin: auto;
}
#pojemnik2 div
{
    position: relative;
    border: 3px dotted;
    float: left;
    width: 200px;
    min-height: 250px;
    margin-right: 25px;
    margin-left: 25px;
    margin-bottom: 50px;
    left: 125px;
}
#pojemnik2 div input
{
    position: absolute;
    left: 0px;
    bottom: 115px;
    width: 100%;
    background-color: grey;
}
table
{
    position: relative;
    margin: auto;
    background-color: grey;
    border: 3px solid black;
}
table input
{
    background-color: transparent;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Sklep</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script src="jquery-3.2.1.min.js"></script>
        <script>
            var stos = 0;
            var towary = new Array();
            var koszyk = new Array();

            function towar(id, nazwa, cena, zdjecie, kategoria, podkategoria)
            {
                this.id = id;
                this.nazwa = nazwa;
                this.cena = cena;
                this.zdjecie = zdjecie;
                this.kategoria = kategoria;
                this.podkategoria = podkategoria;

                stos++;

                this.pokaz = function()
                {
                    var html = "<div>" + '<img src="zdj/';

                    html += zdjecie + '"><hr><p>' + "<b>";
                    html += this.nazwa + "</b><br>Cena: ";
                    html += this.cena + "zł </p><input type='button' value='Kup Teraz' onclick='dodaj(";
                    html += this.id + ")'></div>";

                    return html;
                };
            }
            function zakupy(id)
            {
                this.id = id;
                this.ilosc = 1;
            }
            function dodaj(id)
            {
                for(var i = 0; i < koszyk.length; i++)
                {
                    if (koszyk[i].id == towary[id].id)
                    {
                        koszyk[i].ilosc++;
                    }
                }

                koszyk.push(new zakupy(id));
            }
            function zmien(id, zm)
            {
                for(var i = 0; i < koszyk.length; i++)
                {
                    if (koszyk[i].id == towary[id].id)
                    {
                        koszyk[i].ilosc = $(zm).val();

                        if(koszyk[i].ilosc <= 0)
                        koszyk.splice(i, 1);
                    }
                }

                wozek();
            }
            function usun(i)
            {
                koszyk.splice(i, 1);
                wozek();
            }
            function wyswietl()
            {
                var html = "";

                for(var i = 0; i < towary.length; i++)
                {
                    html += towary[i].pokaz();
                }

                html += "";

                $("#pojemnik2").html(html);
            }
            function wozek()
            {
                var wynik = 0;
                var html = "<table border=1><tr><td>LP.</td><td>Nazwa</td><td>Cena</td><td>Ilość</td><td>Razem</td><td>Cofnij</td></tr>";

                for(var i = 0; i < koszyk.length; i++)
                {
                    html += "<tr><td>" + i + "</td><td>";
                    html += towary[koszyk[i].id].nazwa + "</td><td>";
                    html += towary[koszyk[i].id].cena + " zł</td><td><input type='number' id='b";
                    html += i + "' onchange='zmien(" + koszyk[i].id + ",b" + i + ")' value=" + koszyk[i].ilosc + "></td><td>";
                    html += koszyk[i].ilosc * towary[koszyk[i].id].cena + " zł</td><td><input type='button' onclick='usun(" + i + ")' value='Usuń'></td></tr>";
                    wynik += koszyk[i].ilosc * towary[koszyk[i].id].cena;
                }

                html += "<tr><td colspan='6'>RAZEM:\t" + wynik + " zł</td></tr></table>"
                $("#pojemnik2").html(html);
            }
            $(document).ready(function()
            {
                wyswietl();

                $("#nawigacja").children().first().click(function()
                {
                    wyswietl();
                });
                $("#nawigacja").children().last().click(function()
                {
                    wozek();
                });
            });

            towary.push(new towar(stos, "Pamięć ADATA XPG DDR4 8GB/2400Mhz CL16", 397.75, "0.png", "RAM", "DDR4"));
            towary.push(new towar(stos, "Pamięć Ballistix DDR4 Sport LT 8GB(2*4GB)/2400Mhz", 359.00, "1.jpg", "RAM", "DDR4"));
            towary.push(new towar(stos, "Pamięć Corsair Vengeance LPX DDR4 8GB(2*4GB)/3000MHz CL15", 452.54, "2.jpg", "RAM", "DDR4"));
            towary.push(new towar(stos, "Pamięć HyperX FURY DDR3 8GB(2*4GB)/1600MHz CL10", 299.00, "3.jpg", "RAM", "DDR3"));
            towary.push(new towar(stos, "Pamięć Patriot Viper 4 DDR4 8GB(2*4GB)/3000MHz CL16", 434.51, "4.jpg", "RAM", "DDR4"));
            towary.push(new towar(stos, "Pamięć GoodRam IRDM DDR4 8GB/2400MHz CL15", 357.00, "5.jpg", "RAM", "DDR4"));
        </script>

        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body background="zdj/tlo.jpg">
        <div id="pojemnik1">
            <div id="nawigacja">
                <div><img src="zdj/home.jpg">Strona domowa</div>
                <div><img src="zdj/koszyk.jpg">Przejdź do koszyka</div>
            </div>
            <div id="pojemnik2"></div>
        </div>
    </body>
</html>