JSFiddle - React, Tailwind, and code Playground

by Bigmuddyfoot

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Quote System</title>

</head>

<body>



<h1>Quote Cart</h1>



<div id="quote-cart"></div>



<h2>Add Products</h2>

<form id="add-to-quote-form">

<label for="site-dropdown">Select Site:</label>

<select id="site-dropdown" name="site">

<option value="9843598">Site 1</option>

<option value="89419111">Site 2</option>

</select>



<ul>

<li>

Product 1

<input type="number" class="qty-input" value="1" min="1">

<button type="button" class="add-to-quote-btn" data-title="This is item 1" data-catnum="9418956196">Add To Quote</button>

</li>

<li>

Product 2

<input type="number" class="qty-input" value="1" min="1">

<button type="button" class="add-to-quote-btn" data-title="This is item 2" data-catnum="1231654351">Add To Quote</button>

</li>

</ul>

</form>

<button id="inspect-array-btn">Inspect Array</button>



<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>



</body>

</html>

JavaScript

$(document).ready(function() {

    var quoteCart = [];

$('.add-to-quote-btn').on('click', function() {

    var siteId = $('#site-dropdown').val();

    var catNum = $(this).data('catnum');

    var title = $(this).data('title');

    var qty = $(this).siblings('.qty-input').val();

    if (qty !== null && !isNaN(qty) && qty > 0) {

        addToCart(siteId, catNum, title, parseInt(qty));

        updateCartDisplay();

        // Optionally reset the input field to 1

        $(this).siblings('.qty-input').val(1);

    }

	// Attach "Delete Site" button listener outside of updateCartDisplay

  const deleteSiteButtons = document.querySelectorAll(".delete-site-btn");

  deleteSiteButtons.forEach((button) => {

    button.addEventListener("click", () => {

      const siteIdToDelete = button.getAttribute("data-siteid");

      deleteSite(quoteCart, siteIdToDelete);

    });

  });

	function addToCart(siteId, catNum, title, qty) {

    var siteIndex = quoteCart.findIndex(item => item.siteId === siteId);

    if (siteIndex === -1) {

        quoteCart.push({

            siteId: siteId,

            items: [{ catNum: catNum, title: title, qty: qty }]

        });

    } else {

        var itemIndex = quoteCart[siteIndex].items.findIndex(item => item.catNum === catNum);

        if (itemIndex === -1) {

            quoteCart[siteIndex].items.push({ catNum: catNum, title: title, qty: qty });

        } else {

            quoteCart[siteIndex].items[itemIndex].qty += qty;

        }

    }

}

    function increaseQty(siteId, catNum) {

        var siteIndex = quoteCart.findIndex(item => item.siteId === siteId);

        if (siteIndex !== -1) {

            var itemIndex = quoteCart[siteIndex].items.findIndex(item => item.catNum === catNum);

            if (itemIndex !== -1) {

                quoteCart[siteIndex].items[itemIndex].qty += 1;

            }

        }

        updateCartDisplay();

    }

    function decreaseQty(siteId, catNum) {

        var...