HTML CSS JavaScript GST Calculator Free

Mar 7, 2025

Goods and Services Tax (GST) is a tax applied to the supply of goods and services. Calculating GST manually can be time-consuming and error-prone. A GST Calculator Free tool helps businesses and individuals calculate GST instantly and accurately.

html css javascript gst calculator free

What is a GST Calculator?

A GST Calculator is an online tool that computes GST for different tax slabs (such as 5%, 12%, 18%, and 28%). It helps in determining the GST-inclusive or GST-exclusive price of a product or service.

How Does a GST Calculator Work?

A GST Calculator Free works using the following formulas:

GST Amount = (Original Price × GST Rate) ÷ 100

Final Price = Original Price + GST Amount

For example, if the product price is ₹1000 and the GST rate is 18%, the GST amount will be ₹180, making the final price ₹1180.

How to Use a GST Calculator?

Using a GST Calculator is simple:

  • Enter the product price.
  • Select the applicable GST rate.
  • The calculator will instantly display the GST amount and total price.

Why Use a Free GST Calculator?

A GST Calculator Free tool offers several benefits:

  • Fast and accurate GST calculations.
  • Helps in tax planning and billing.
  • Eliminates human calculation errors.
  • Useful for businesses, accountants, and online sellers.

Conclusion

A GST Calculator Free is a must-have tool for anyone dealing with GST-based transactions. It ensures accurate calculations, saves time, and simplifies tax compliance.

Here Is Simple

GST Calculator

Calculate GST amount and total price from the base amount.

GST Calculation Results

Base Amount: ₹0.00
GST Amount: ₹0.00
Total Amount (Incl. GST): ₹0.00

GST Breakdown

CGST (Central GST): ₹0.00
SGST (State GST): ₹0.00
Extract GST from a price that already includes GST.

GST Extraction Results

Total Amount (Incl. GST): ₹0.00
GST Amount: ₹0.00
Base Amount (Excl. GST): ₹0.00

GST Breakdown

CGST (Central GST): ₹0.00
SGST (State GST): ₹0.00
Add GST to a price that doesn't include GST.

GST Addition Results

Base Amount (Excl. GST): ₹0.00
GST Amount: ₹0.00
Total Amount (Incl. GST): ₹0.00

GST Breakdown

CGST (Central GST): ₹0.00
SGST (State GST): ₹0.00
Calculate GST for multiple items with different rates.

Multi-item Calculation Results

Item Base Amount GST Rate GST Amount Total
Grand Total: ₹0.00 ₹0.00
Current GST rates in India and common items in each category.
Rate Category Common Items
0% Exempt Fresh fruits, vegetables, milk, curd, bread, salt, wheat, rice
5% Essential Sugar, tea, coffee, spices, edible oils, medicine, biogas, fertilizers
12% Standard Frozen meat products, butter, cheese, dry fruits, fruit juices, ayurvedic medicines
18% Standard Pasta, biscuits, cakes, jams, soups, ice cream, computers, printers, smartphones
28% Luxury Automobiles, motorcycles, air conditioners, dishwashers, pan masala, cigarettes

GST Structure in India

India follows a dual GST structure:

  • CGST (Central GST): Collected by the Central Government
  • SGST (State GST): Collected by the State Government
  • IGST (Integrated GST): Levied on inter-state supply of goods and services

For intra-state transactions, the GST is split equally between CGST and SGST.



Here Is Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced GST Calculator</title>
    <style>
        :root {
            --primary-color: #4a6fa5;
            --secondary-color: #166088;
            --accent-color: #4fc3dc;
            --light-bg: #f5f8fa;
            --dark-text: #333;
            --light-text: #f5f5f5;
            --border-radius: 8px;
            --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: var(--dark-text);
            background-color: var(--light-bg);
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: white;
            padding: 30px;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
        }

        h1 {
            text-align: center;
            color: var(--secondary-color);
            margin-bottom: 30px;
        }

        .calculator-tabs {
            display: flex;
            margin-bottom: 20px;
            border-bottom: 2px solid var(--primary-color);
        }

        .tab-button {
            background-color: #e9ecef;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            border-radius: var(--border-radius) var(--border-radius) 0 0;
            margin-right: 5px;
            transition: background-color 0.3s;
            font-weight: 500;
        }

        .tab-button.active {
            background-color: var(--primary-color);
            color: white;
        }

        .tab-content {
            display: none;
            animation: fadeIn 0.5s;
        }

        .tab-content.active {
            display: block;
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
        }

        input, select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: var(--border-radius);
            font-size: 16px;
            transition: border-color 0.3s;
        }

        input:focus, select:focus {
            outline: none;
            border-color: var(--accent-color);
            box-shadow: 0 0 0 2px rgba(79, 195, 220, 0.2);
        }

        .hint {
            font-size: 12px;
            color: #666;
            margin-top: 5px;
        }

        .calculate-btn {
            background-color: var(--secondary-color);
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-size: 16px;
            font-weight: 500;
            width: 100%;
            transition: background-color 0.3s;
        }

        .calculate-btn:hover {
            background-color: var(--primary-color);
        }

        .result-section {
            margin-top: 30px;
            padding: 20px;
            background-color: var(--light-bg);
            border-radius: var(--border-radius);
            display: none;
        }

        .result-section.show {
            display: block;
            animation: slideIn 0.5s;
        }

        .result-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }

        .result-table th, .result-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        .result-table th {
            background-color: var(--primary-color);
            color: white;
        }

        .result-table tr:nth-child(even) {
            background-color: rgba(0, 0, 0, 0.05);
        }

        .highlight {
            font-weight: bold;
            color: var(--secondary-color);
        }

        .info-box {
            background-color: rgba(79, 195, 220, 0.1);
            border-left: 4px solid var(--accent-color);
            padding: 10px 15px;
            margin: 20px 0;
            font-size: 14px;
        }

        /* Responsive styles */
        @media (max-width: 600px) {
            .container {
                padding: 15px;
            }
            
            .tab-button {
                padding: 8px 12px;
                font-size: 14px;
            }
        }

        /* Animations */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideIn {
            from { transform: translateY(-20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        /* GST Rates Table */
        .gst-rates {
            margin-top: 20px;
        }

        .gst-rates-table {
            width: 100%;
            border-collapse: collapse;
        }

        .gst-rates-table th, .gst-rates-table td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        .gst-rates-table th {
            background-color: var(--primary-color);
            color: white;
        }

        .toggle-rates {
            background: none;
            border: none;
            color: var(--secondary-color);
            cursor: pointer;
            font-size: 14px;
            text-decoration: underline;
            margin-top: 10px;
            padding: 0;
        }

        /* Multi-item calculator */
        .items-container {
            max-height: 300px;
            overflow-y: auto;
            margin-bottom: 20px;
        }

        .item-row {
            display: flex;
            margin-bottom: 10px;
            gap: 10px;
        }

        .item-input {
            flex: 1;
        }

        .remove-item {
            background-color: #ff6b6b;
            color: white;
            border: none;
            border-radius: var(--border-radius);
            width: 30px;
            cursor: pointer;
        }

        .add-item {
            background-color: var(--accent-color);
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: var(--border-radius);
            cursor: pointer;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Advanced GST Calculator</h1>
        
        <div class="calculator-tabs">
            <button class="tab-button active" data-tab="basic">Basic Calculator</button>
            <button class="tab-button" data-tab="inclusive">GST Inclusive</button>
            <button class="tab-button" data-tab="exclusive">GST Exclusive</button>
            <button class="tab-button" data-tab="multi-item">Multi-item</button>
            <button class="tab-button" data-tab="rates">GST Rates</button>
        </div>
        
        <!-- Basic Calculator -->
        <div class="tab-content active" id="basic">
            <div class="info-box">
                Calculate GST amount and total price from the base amount.
            </div>
            
            <div class="form-group">
                <label for="basic-amount">Amount (₹)</label>
                <input type="number" id="basic-amount" placeholder="Enter amount without GST">
            </div>
            
            <div class="form-group">
                <label for="basic-gst-rate">GST Rate (%)</label>
                <select id="basic-gst-rate">
                    <option value="0">0% - Exempt</option>
                    <option value="5">5% - Essential items</option>
                    <option value="12">12% - Standard rate</option>
                    <option value="18" selected>18% - Standard rate</option>
                    <option value="28">28% - Luxury items</option>
                    <option value="custom">Custom rate</option>
                </select>
            </div>
            
            <div class="form-group" id="basic-custom-rate-group" style="display: none;">
                <label for="basic-custom-rate">Custom GST Rate (%)</label>
                <input type="number" id="basic-custom-rate" placeholder="Enter custom GST rate" min="0" max="100">
            </div>
            
            <button class="calculate-btn" id="basic-calculate">Calculate GST</button>
            
            <div class="result-section" id="basic-result">
                <h3>GST Calculation Results</h3>
                <table class="result-table">
                    <tr>
                        <td>Base Amount:</td>
                        <td id="basic-base-amount" class="highlight">₹0.00</td>
                    </tr>
                    <tr>
                        <td>GST Amount:</td>
                        <td id="basic-gst-amount">₹0.00</td>
                    </tr>
                    <tr>
                        <td>Total Amount (Incl. GST):</td>
                        <td id="basic-total-amount" class="highlight">₹0.00</td>
                    </tr>
                </table>
                
                <div class="gst-breakdown" id="basic-gst-breakdown">
                    <h4>GST Breakdown</h4>
                    <table class="result-table">
                        <tr>
                            <td>CGST (Central GST):</td>
                            <td id="basic-cgst">₹0.00</td>
                        </tr>
                        <tr>
                            <td>SGST (State GST):</td>
                            <td id="basic-sgst">₹0.00</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        
        <!-- GST Inclusive Calculator -->
        <div class="tab-content" id="inclusive">
            <div class="info-box">
                Extract GST from a price that already includes GST.
            </div>
            
            <div class="form-group">
                <label for="inclusive-amount">Total Amount (Including GST) (₹)</label>
                <input type="number" id="inclusive-amount" placeholder="Enter amount with GST included">
            </div>
            
            <div class="form-group">
                <label for="inclusive-gst-rate">GST Rate (%)</label>
                <select id="inclusive-gst-rate">
                    <option value="0">0% - Exempt</option>
                    <option value="5">5% - Essential items</option>
                    <option value="12">12% - Standard rate</option>
                    <option value="18" selected>18% - Standard rate</option>
                    <option value="28">28% - Luxury items</option>
                    <option value="custom">Custom rate</option>
                </select>
            </div>
            
            <div class="form-group" id="inclusive-custom-rate-group" style="display: none;">
                <label for="inclusive-custom-rate">Custom GST Rate (%)</label>
                <input type="number" id="inclusive-custom-rate" placeholder="Enter custom GST rate" min="0" max="100">
            </div>
            
            <button class="calculate-btn" id="inclusive-calculate">Extract GST</button>
            
            <div class="result-section" id="inclusive-result">
                <h3>GST Extraction Results</h3>
                <table class="result-table">
                    <tr>
                        <td>Total Amount (Incl. GST):</td>
                        <td id="inclusive-total-amount" class="highlight">₹0.00</td>
                    </tr>
                    <tr>
                        <td>GST Amount:</td>
                        <td id="inclusive-gst-amount">₹0.00</td>
                    </tr>
                    <tr>
                        <td>Base Amount (Excl. GST):</td>
                        <td id="inclusive-base-amount" class="highlight">₹0.00</td>
                    </tr>
                </table>
                
                <div class="gst-breakdown" id="inclusive-gst-breakdown">
                    <h4>GST Breakdown</h4>
                    <table class="result-table">
                        <tr>
                            <td>CGST (Central GST):</td>
                            <td id="inclusive-cgst">₹0.00</td>
                        </tr>
                        <tr>
                            <td>SGST (State GST):</td>
                            <td id="inclusive-sgst">₹0.00</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        
        <!-- GST Exclusive Calculator -->
        <div class="tab-content" id="exclusive">
            <div class="info-box">
                Add GST to a price that doesn't include GST.
            </div>
            
            <div class="form-group">
                <label for="exclusive-amount">Base Amount (Excluding GST) (₹)</label>
                <input type="number" id="exclusive-amount" placeholder="Enter amount without GST">
            </div>
            
            <div class="form-group">
                <label for="exclusive-gst-rate">GST Rate (%)</label>
                <select id="exclusive-gst-rate">
                    <option value="0">0% - Exempt</option>
                    <option value="5">5% - Essential items</option>
                    <option value="12">12% - Standard rate</option>
                    <option value="18" selected>18% - Standard rate</option>
                    <option value="28">28% - Luxury items</option>
                    <option value="custom">Custom rate</option>
                </select>
            </div>
            
            <div class="form-group" id="exclusive-custom-rate-group" style="display: none;">
                <label for="exclusive-custom-rate">Custom GST Rate (%)</label>
                <input type="number" id="exclusive-custom-rate" placeholder="Enter custom GST rate" min="0" max="100">
            </div>
            
            <button class="calculate-btn" id="exclusive-calculate">Add GST</button>
            
            <div class="result-section" id="exclusive-result">
                <h3>GST Addition Results</h3>
                <table class="result-table">
                    <tr>
                        <td>Base Amount (Excl. GST):</td>
                        <td id="exclusive-base-amount" class="highlight">₹0.00</td>
                    </tr>
                    <tr>
                        <td>GST Amount:</td>
                        <td id="exclusive-gst-amount">₹0.00</td>
                    </tr>
                    <tr>
                        <td>Total Amount (Incl. GST):</td>
                        <td id="exclusive-total-amount" class="highlight">₹0.00</td>
                    </tr>
                </table>
                
                <div class="gst-breakdown" id="exclusive-gst-breakdown">
                    <h4>GST Breakdown</h4>
                    <table class="result-table">
                        <tr>
                            <td>CGST (Central GST):</td>
                            <td id="exclusive-cgst">₹0.00</td>
                        </tr>
                        <tr>
                            <td>SGST (State GST):</td>
                            <td id="exclusive-sgst">₹0.00</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        
        <!-- Multi-item Calculator -->
        <div class="tab-content" id="multi-item">
            <div class="info-box">
                Calculate GST for multiple items with different rates.
            </div>
            
            <div class="items-container" id="items-container">
                <div class="item-row">
                    <div class="item-input">
                        <input type="text" placeholder="Item description" class="item-desc">
                    </div>
                    <div class="item-input">
                        <input type="number" placeholder="Amount (₹)" class="item-amount">
                    </div>
                    <div class="item-input">
                        <select class="item-gst-rate">
                            <option value="0">0%</option>
                            <option value="5">5%</option>
                            <option value="12">12%</option>
                            <option value="18" selected>18%</option>
                            <option value="28">28%</option>
                        </select>
                    </div>
                    <button class="remove-item">×</button>
                </div>
            </div>
            
            <button class="add-item" id="add-item">+ Add Item</button>
            
            <button class="calculate-btn" id="multi-calculate">Calculate Total</button>
            
            <div class="result-section" id="multi-result">
                <h3>Multi-item Calculation Results</h3>
                <table class="result-table" id="multi-result-table">
                    <thead>
                        <tr>
                            <th>Item</th>
                            <th>Base Amount</th>
                            <th>GST Rate</th>
                            <th>GST Amount</th>
                            <th>Total</th>
                        </tr>
                    </thead>
                    <tbody id="multi-result-body">
                        <!-- Item rows will be added here -->
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="2" class="highlight">Grand Total:</td>
                            <td></td>
                            <td id="multi-total-gst" class="highlight">₹0.00</td>
                            <td id="multi-grand-total" class="highlight">₹0.00</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
        
        <!-- GST Rates Information -->
        <div class="tab-content" id="rates">
            <div class="info-box">
                Current GST rates in India and common items in each category.
            </div>
            
            <div class="gst-rates">
                <table class="gst-rates-table">
                    <tr>
                        <th>Rate</th>
                        <th>Category</th>
                        <th>Common Items</th>
                    </tr>
                    <tr>
                        <td>0%</td>
                        <td>Exempt</td>
                        <td>Fresh fruits, vegetables, milk, curd, bread, salt, wheat, rice</td>
                    </tr>
                    <tr>
                        <td>5%</td>
                        <td>Essential</td>
                        <td>Sugar, tea, coffee, spices, edible oils, medicine, biogas, fertilizers</td>
                    </tr>
                    <tr>
                        <td>12%</td>
                        <td>Standard</td>
                        <td>Frozen meat products, butter, cheese, dry fruits, fruit juices, ayurvedic medicines</td>
                    </tr>
                    <tr>
                        <td>18%</td>
                        <td>Standard</td>
                        <td>Pasta, biscuits, cakes, jams, soups, ice cream, computers, printers, smartphones</td>
                    </tr>
                    <tr>
                        <td>28%</td>
                        <td>Luxury</td>
                        <td>Automobiles, motorcycles, air conditioners, dishwashers, pan masala, cigarettes</td>
                    </tr>
                </table>
                
                <h4>GST Structure in India</h4>
                <p>India follows a dual GST structure:</p>
                <ul>
                    <li><strong>CGST (Central GST):</strong> Collected by the Central Government</li>
                    <li><strong>SGST (State GST):</strong> Collected by the State Government</li>
                    <li><strong>IGST (Integrated GST):</strong> Levied on inter-state supply of goods and services</li>
                </ul>
                
                <p>For intra-state transactions, the GST is split equally between CGST and SGST.</p>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Tab Switching
            const tabButtons = document.querySelectorAll('.tab-button');
            const tabContents = document.querySelectorAll('.tab-content');
            
            tabButtons.forEach(button => {
                button.addEventListener('click', () => {
                    const tabId = button.getAttribute('data-tab');
                    
                    // Remove active class from all tabs
                    tabButtons.forEach(btn => btn.classList.remove('active'));
                    tabContents.forEach(content => content.classList.remove('active'));
                    
                    // Add active class to current tab
                    button.classList.add('active');
                    document.getElementById(tabId).classList.add('active');
                });
            });
            
            // Format currency
            function formatCurrency(amount) {
                return '₹' + parseFloat(amount).toFixed(2);
            }
            
            // Custom rate handling
            function setupCustomRateHandling(selectId, groupId, customInputId) {
                const select = document.getElementById(selectId);
                const customGroup = document.getElementById(groupId);
                const customInput = document.getElementById(customInputId);
                
                select.addEventListener('change', function() {
                    if (this.value === 'custom') {
                        customGroup.style.display = 'block';
                    } else {
                        customGroup.style.display = 'none';
                    }
                });
                
                return function() {
                    if (select.value === 'custom') {
                        return parseFloat(customInput.value) || 0;
                    } else {
                        return parseFloat(select.value) || 0;
                    }
                };
            }
            
            // Setup custom rate handling for each calculator
            const getBasicGstRate = setupCustomRateHandling('basic-gst-rate', 'basic-custom-rate-group', 'basic-custom-rate');
            const getInclusiveGstRate = setupCustomRateHandling('inclusive-gst-rate', 'inclusive-custom-rate-group', 'inclusive-custom-rate');
            const getExclusiveGstRate = setupCustomRateHandling('exclusive-gst-rate', 'exclusive-custom-rate-group', 'exclusive-custom-rate');
            
            // Basic Calculator
            document.getElementById('basic-calculate').addEventListener('click', function() {
                const baseAmount = parseFloat(document.getElementById('basic-amount').value) || 0;
                const gstRate = getBasicGstRate();
                
                const gstAmount = (baseAmount * gstRate) / 100;
                const totalAmount = baseAmount + gstAmount;
                
                // Display results
                document.getElementById('basic-base-amount').textContent = formatCurrency(baseAmount);
                document.getElementById('basic-gst-amount').textContent = formatCurrency(gstAmount);
                document.getElementById('basic-total-amount').textContent = formatCurrency(totalAmount);
                
                // GST Breakdown
                const cgst = gstAmount / 2;
                const sgst = gstAmount / 2;
                document.getElementById('basic-cgst').textContent = formatCurrency(cgst);
                document.getElementById('basic-sgst').textContent = formatCurrency(sgst);
                
                // Show result section
                document.getElementById('basic-result').classList.add('show');
            });
            
            // GST Inclusive Calculator
            document.getElementById('inclusive-calculate').addEventListener('click', function() {
                const totalAmount = parseFloat(document.getElementById('inclusive-amount').value) || 0;
                const gstRate = getInclusiveGstRate();
                
                const baseAmount = totalAmount * (100 / (100 + gstRate));
                const gstAmount = totalAmount - baseAmount;
                
                // Display results
                document.getElementById('inclusive-total-amount').textContent = formatCurrency(totalAmount);
                document.getElementById('inclusive-gst-amount').textContent = formatCurrency(gstAmount);
                document.getElementById('inclusive-base-amount').textContent = formatCurrency(baseAmount);
                
                // GST Breakdown
                const cgst = gstAmount / 2;
                const sgst = gstAmount / 2;
                document.getElementById('inclusive-cgst').textContent = formatCurrency(cgst);
                document.getElementById('inclusive-sgst').textContent = formatCurrency(sgst);
                
                // Show result section
                document.getElementById('inclusive-result').classList.add('show');
            });
            
            // GST Exclusive Calculator
            document.getElementById('exclusive-calculate').addEventListener('click', function() {
                const baseAmount = parseFloat(document.getElementById('exclusive-amount').value) || 0;
                const gstRate = getExclusiveGstRate();
                
                const gstAmount = (baseAmount * gstRate) / 100;
                const totalAmount = baseAmount + gstAmount;
                
                // Display results
                document.getElementById('exclusive-base-amount').textContent = formatCurrency(baseAmount);
                document.getElementById('exclusive-gst-amount').textContent = formatCurrency(gstAmount);
                document.getElementById('exclusive-total-amount').textContent = formatCurrency(totalAmount);
                
                // GST Breakdown
                const cgst = gstAmount / 2;
                const sgst = gstAmount / 2;
                document.getElementById('exclusive-cgst').textContent = formatCurrency(cgst);
                document.getElementById('exclusive-sgst').textContent = formatCurrency(sgst);
                
                // Show result section
                document.getElementById('exclusive-result').classList.add('show');
            });
            
            // Multi-item Calculator
            const itemsContainer = document.getElementById('items-container');
            
            // Add item
            document.getElementById('add-item').addEventListener('click', function() {
                const newItem = document.createElement('div');
                newItem.className = 'item-row';
                newItem.innerHTML = `
                    <div class="item-input">
                        <input type="text" placeholder="Item description" class="item-desc">
                    </div>
                    <div class="item-input">
                        <input type="number" placeholder="Amount (₹)" class="item-amount">
                    </div>
                    <div class="item-input">
                        <select class="item-gst-rate">
                            <option value="0">0%</option>
                            <option value="5">5%</option>
                            <option value="12">12%</option>
                            <option value="18" selected>18%</option>
                            <option value="28">28%</option>
                        </select>
                    </div>
                    <button class="remove-item">×</button>
                `;
                
                itemsContainer.appendChild(newItem);
                
                // Add event listener to the new remove button
                newItem.querySelector('.remove-item').addEventListener('click', function() {
                    itemsContainer.removeChild(newItem);
                });
            });
            
            // Remove item (for initial item)
            document.querySelector('.remove-item').addEventListener('click', function() {
                // Don't remove if it's the last item
                if (itemsContainer.children.length > 1) {
                    itemsContainer.removeChild(this.parentElement);
                }
            });
            
            // Calculate multi-item totals
            document.getElementById('multi-calculate').addEventListener('click', function() {
                const items = itemsContainer.querySelectorAll('.item-row');
                const resultBody = document.getElementById('multi-result-body');
                
                // Clear previous results
                resultBody.innerHTML = '';
                
                let totalGst = 0;
                let grandTotal = 0;
                
                items.forEach(item => {
                    const description = item.querySelector('.item-desc').value || 'Unnamed Item';
                    const baseAmount = parseFloat(item.querySelector('.item-amount').value) || 0;
                    const gstRate = parseFloat(item.querySelector('.item-gst-rate').value) || 0;
                    
                    const gstAmount = (baseAmount * gstRate) / 100;
                    const itemTotal = baseAmount + gstAmount;
                    
                    totalGst += gstAmount;
                    grandTotal += itemTotal;
                    
                    // Add row to results table
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${description}</td>
                        <td>${formatCurrency(baseAmount)}</td>
                        <td>${gstRate}%</td>
                        <td>${formatCurrency(gstAmount)}</td>
                        <td>${formatCurrency(itemTotal)}</td>
                    `;
                    
                    resultBody.appendChild(row);
                });
                
                // Update totals
                document.getElementById('multi-total-gst').textContent = formatCurrency(totalGst);
                document.getElementById('multi-grand-total').textContent = formatCurrency(grandTotal);
                
                // Show result section
                document.getElementById('multi-result').classList.add('show');
            });
        });
    </script>
</body>
</html>
Next Post