Untitled

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ page isELIgnored="false"%>

<fmt:setLocale value="bg_BUL" />
<fmt:setBundle basename="i18n.text" />

<!DOCTYPE html>
<html>

<head>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

    <meta charset="UTF-8">
    <title>
        <fmt:message key="TITLE" />
    </title>
</head>
<header>
    <h1>
        <fmt:message key="TITLE" />
    </h1>
</header>

<body>

    <script>
        $(document).ready(function () {
            $(".operator").click(function (event) {
                var text = event.target.id;
                var pattern = /\d/g;
                var id = text.match(pattern);
                var subtotalOfProduct = $("#product_base_price" + id).val() * $("#number" + id).val();

                $("#product_total_price" + id)
                    .text(subtotalOfProduct);

                var rows = $("tr");
                var total = 0;
                var i = 0;
                var length = $(".total").length;
                console.log(length);
                while (i <= length) {
                    let currentRow = rows[i];

                    console.log(currentRow);
                    total = total + $("#product_total_price" + i).val();
                    i++;
                }
                $("#orderCost").text(total);
            });
        });

    </script>


    <div>
        <table>
            <thead>
                <tr>
                    <th colspan="2">
                        <fmt:message key="PRODUCT" />
                    </th>
                    <th>
                        <fmt:message key="PRICE" />
                    </th>
                    <th>
                        <fmt:message key="QUANTITY" />
                    </th>
                    <th>
                        <fmt:message key="SUBTOTAL" />
                    </th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <c:forEach items="${requestScope.cartProducts}" var="cp">
                        <tr>
                            <td>
                                <div>
                                    <img src="http://placehold.it/100x100" class="img-responsive" />
                                </div>
                            </td>
                            <td>
                                <div>
                                    <h4>${cp.name}</h4>
                                </div>
                            </td>
                            <td>${cp.price}</tdid>

                            <td>
                                <form name="quantityForm" method="post">
                                    <input style="font-size: 21px;" type="button" value="-" id="btn${cp.id}"
                                        onclick='javascript: document.getElementById("number${cp.id}").value--;'
                                        class="operator">

                                    <input id="number${cp.id}" type="number" name="quantity" min="1" max="100"
                                        value="${cp.quantity}">

                                    <input id="btn${cp.id}" style="font-size: 21px;" type="button" value="+"
                                        onclick='javascript: document.getElementById("number${cp.id}").value++;'
                                        class="operator">

                                </form> <input type="hidden" id="product_base_price${cp.id}" value="${cp.price}">
                            <td>
                                <div id="product_total_price${cp.id}" class="total">${cp.price * cp.quantity }</div>
                            </td>
                            <%-- 	<input type="hidden" id="orderCostHidden" value="${orderCost + cp.price * cp.quantity}"> --%>
                            <c:set var="orderCostInitial" scope="session"
                                value="${orderCostInitial + cp.price * cp.quantity}" />
                            <td>
                                <button class="btn btn-danger btn-sm">
                                    <i class="fa fa-trash-o"></i>
                                </button>
                            </td>
                        </tr>

                </c:forEach>
                <c:set var="length" value="${fn:length(cp)}" />
            </tbody>
            <tfoot>
                <tr>
                    <td align="center" class="text-center"><strong>
                            <fmt:message key="TOTAL" />
                            <div id="orderCost">${orderCostInitial}</div>
                        </strong></td>
                </tr>
                <tr>
                    <td><a href="#" class="btn btn-warning"><i class="fa fa-angle-left"></i>
                            <fmt:message key="CONTINUE_SHOPPING" /></a></td>
                    <td colspan="2" class="hidden-xs"></td>
                    <td><a href="/cmania/checkout" class="btn btn-success btn-block">
                            <fmt:message key="CHECKOUT" /><i class="fa fa-angle-right"></i>
                        </a></td>
                </tr>

            </tfoot>

        </table>
    </div>


</body>
<footer>
    <fmt:message key="COPYRIGHT" />
</footer>

</html>