Calculating Quantity and Price Total in React

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Price Calculator</title>
</head>

<body>
    <form>
        <h3>Calculate Total Price in Javascript</h3>
        <table id="itemTable">
            
            <tr class="item">
                <td>
                    <label for="itemName1">Item Name:</label>
                </td>
                <td>
                    <input type="text" value="Mouse" name="itemName" placeholder="Item 1">
                </td>
                <td>
                    <label for="quantity1">Quantity:</label>
                </td>
                <td>
                    <input type="number" name="quantity" min="1" value="2" oninput="calculateTotal()">
                </td>
                <td>
                    <label for="price1">Price per unit:</label>
                </td>
                <td>
                    <input type="number" name="price" step="0.01" value="500" oninput="calculateTotal()">
                </td>
                <td>
                    <button type="button" class='delete-btn' onclick="deleteItem(this)">Delete</button>
                </td>
            </tr>
        </table>

<label for="total">Total Price:</label>
        <input type="text" id="total" name="total" readonly>
    </form>

function calculateTotal() {
            const items = document.querySelectorAll('.item');
            let total = 0;

items.forEach((item, index) => {
                const quantity = parseFloat(item.querySelector('[name="quantity"]').value) || 0;
                const price = parseFloat(item.querySelector('[name="price"]').value) || 0;

total += quantity * price;
            });

document.getElementById("total").value = total.toFixed(2);
        }

function addNewItem() {
            const table = document.getElementById("itemTable");
            const newRow = table.insertRow(-1);
            newRow.classList.add("item");

const labels = ["Item Name", "Quantity", "Price per unit"];

const newItem = { itemName: `New Item ${table.rows.length}`, quantity: 1, price: 1 };

labels.forEach((label, i) => {
                const cell = newRow.insertCell();
                const inputCell = newRow.insertCell();

cell.innerHTML = `<label>${label}:</label>`;

const input = document.createElement("input");
                input.type = i === 0 ? "text" : "number";
                input.name = i === 0 ? "itemName" : i === 1 ? "quantity" : "price";
                input.step = i === 2 ? "0.01" : "1";
                input.value = newItem[input.name];
                input.placeholder = i === 0 ? `Item ${table.rows.length}` : "";
                input.oninput = calculateTotal;

inputCell.appendChild(input);

// Update the itemData array with the new item data
                newItem[input.name] = input.value;
            });

const deleteCell = newRow.insertCell();
            deleteCell.innerHTML = `<button type="button" class='delete-btn' onclick="deleteItem(this)">Delete</button>`;

// Add the new item data to the itemData array
            itemData.push(newItem);

calculateTotal();
        }

function deleteItem(button) {
            const row = button.closest('.item');
            const index = Array.from(row.parentNode.children).indexOf(row);

// Remove the item data from the array
            itemData.splice(index, 1);

// Remove the row from the table
            row.remove();

calculateTotal();
        }

calculateTotal();
    </script>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f4;
        }

form {
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

.item {
            margin-bottom: 20px;
        }

label {
            display: block;
            margin-bottom: 8px;
        }

input {
            width: 100%;
            padding: 8px;
            margin-bottom: 12px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

input[type="text"],
        input[type="number"] {
            height: 38px;
        }

input[type="text"]:focus,
        input[type="number"]:focus {
            outline: 2px solid #3498db;
            border: 1px solid #3498db;
        }

input[readonly] {
            background-color: #eee;
            cursor: not-allowed;
        }

#total {
            font-weight: bold;
            color: #27ae60;
            font-size: 18px;
        }

button {
            background-color: #4caf50;
            color: #fff;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

button:hover {
            background-color: #45a049;
        }

.delete-btn {
            background-color: rgb(255, 0, 0);
            /* Bright red */
        }

.delete-btn:hover {
            background-color: rgb(220, 0, 0);
            /* Darker red on hover */
        }
    </style>
</body>

</html>