Code

 Script:

$(document).ready(function () {

    const products = {};

    // Add New Product Button Click

    $('#addProductBtn').click(function () {

        const productName = $('#productName').val();

        const productPrice = $('#productPrice').val();

        if (productName && productPrice) {

            products[productName] = parseFloat(productPrice);

            $('#productName').val('');

            $('#productPrice').val('');

            $('.productDropdown').append(new Option(productName, productName));

        } else {

            alert('Please enter both product name and price.');

        }

    });

    // Handle Product Selection

    $(document).on('change', '.productDropdown', function () {

        const productName = $(this).val();

        const price = products[productName] || 0;

        const row = $(this).closest('.form-row');

        row.find('.productPrice').val(price);

        calculateFinalAmount(row);

    });

    // Handle Quantity Change

    $(document).on('input', '.productQty', function () {

        const row = $(this).closest('.form-row');

        calculateFinalAmount(row);

    });

    // Handle Tax Change

    $(document).on('change', '.taxDropdown', function () {

        const row = $(this).closest('.form-row');

        calculateFinalAmount(row);

    });

    // Add Row Button Click

    $(document).on('click', '.addRowBtn', function () {

        const row = $(this).closest('.form-row');

        const clonedRow = row.clone();

        // Retain the selected product and tax in the cloned row

        const selectedProduct = row.find('.productDropdown').val();

        const selectedTax = row.find('.taxDropdown').val();

        // Set the selected values in the cloned row

        clonedRow.find('.productDropdown').val(selectedProduct);

        clonedRow.find('.taxDropdown').val(selectedTax);

        // Update the cloned row button to "Remove"

        clonedRow.find('.addRowBtn')

            .removeClass('btn-success addRowBtn')

            .addClass('btn-danger removeRowBtn')

            .text('Remove');

        // Append the cloned row below the current one

        $('#cart').append(clonedRow);

        // Clear the fields in the current row

        row.find('.productDropdown').val('');

        row.find('.productPrice').val('');

        row.find('.productQty').val('');

        row.find('.taxDropdown').val('0');

        row.find('.finalAmount').val('');

        // Recalculate the grand totals

        calculateGrandTotals();

    });

    // Remove Row Button Click

    $(document).on('click', '.removeRowBtn', function () {

        $(this).closest('.form-row').remove();

        // Recalculate the grand totals

        calculateGrandTotals();

    });

    // Calculate Final Amount

    function calculateFinalAmount(row) {

        const price = parseFloat(row.find('.productPrice').val()) || 0;

        const qty = parseFloat(row.find('.productQty').val()) || 0;

        const tax = parseFloat(row.find('.taxDropdown').val()) || 0;

        let finalAmount = price * qty;

        const amountExclTax = finalAmount;

        finalAmount += (finalAmount * tax) / 100;

        row.find('.finalAmount').val(finalAmount.toFixed(2));

        // Recalculate the grand totals

        calculateGrandTotals();

    }

    // Calculate Grand Totals

    function calculateGrandTotals() {

        let grandTotal = 0;

        let grandTotalExclTax = 0;

        $('#cart .form-row').each(function () {

            const finalAmount = parseFloat($(this).find('.finalAmount').val()) || 0;

            const price = parseFloat($(this).find('.productPrice').val()) || 0;

            const qty = parseFloat($(this).find('.productQty').val()) || 0;

            grandTotal += finalAmount;

            grandTotalExclTax += (price * qty);

        });

        $('#grandTotal').val(grandTotal.toFixed(2));

        $('#grandTotalExclTax').val(grandTotalExclTax.toFixed(2));

    }

});

Html:

<div class="container mt-5">

    <!-- Add New Product Section -->

    <h2>Add New Product</h2>

    <div class="form-row">

        <div class="col-md-5">

            <input type="text" id="productName" class="form-control" placeholder="Product Name">

        </div>

        <div class="col-md-5">

            <input type="number" id="productPrice" class="form-control" placeholder="Price">

        </div>

        <div class="col-md-2">

            <button class="btn btn-primary" id="addProductBtn">Add New Product</button>

        </div>

    </div>

    <!-- Product List Section -->

    <h3 class="mt-5">Product List</h3>

    <div id="productList"></div>

    <!-- Add to Cart Section -->

    <h3 class="mt-5">Add to Cart</h3>

    <div id="cart">

        <div class="form-row" id="productRow">

            <div class="col-md-3">

                <select class="form-control productDropdown">

                    <option value="" disabled selected>Select Product</option>

                </select>

            </div>

            <div class="col-md-2">

                <input type="number" class="form-control productPrice" placeholder="Price" readonly>

            </div>

            <div class="col-md-2">

                <input type="number" class="form-control productQty" placeholder="Qty">

            </div>

            <div class="col-md-2">

                <select class="form-control taxDropdown">

                    <option value="0">No Tax</option>

                    <option value="5">5%</option>

                    <option value="12">12%</option>

                    <option value="18">18%</option>

                </select>

            </div>

            <div class="col-md-2">

                <input type="number" class="form-control finalAmount" placeholder="Final Amount" readonly>

            </div>

            <div class="col-md-1">

                <button class="btn btn-success addRowBtn">Add</button>

            </div>

        </div>

    </div>

    <!-- Grand Total Section -->

    <div class="form-row mt-5">

        <div class="col-md-6">

            <label for="grandTotal">Grand Total (Including Tax):</label>

            <input type="number" id="grandTotal" class="form-control" readonly>

        </div>

        <div class="col-md-6">

            <label for="grandTotalExclTax">Grand Total (Excluding Tax):</label>

            <input type="number" id="grandTotalExclTax" class="form-control" readonly>

        </div>

    </div>

</div>