let me explain what i am using for the form i use 'HTML Forms' plugin on wordpress, 'HTML Forms' only requires a form code and has an 'Actions' tab where i put in the from email, the to email and the 'Message' where i enter the message body code, and also there are 10 products i want the message body code to add each product as the user adds it in the form and i want to see all the information for each product as per what the users added under 'Please quote me on the following items:' in the email, i want to create a message body code for the following html form:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Request a Quote Form</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .container {
            width: 100%;
            max-width: 800px;
            margin: auto;
            border: 1px solid #ddd;
            padding: 20px;
            background-color: #f4f4f4;
        }
        h2 {
            background-color: #2e5132;
            color: white;
            padding: 10px;
            text-align: center;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th,
        td {
            border: 1px solid #000;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #2e5132;
            color: white;
        }
        input[type="text"],
        input[type="email"],
        input[type="number"],
        textarea {
            width: 100%;
            padding: 8px;
            margin: 5px 0;
            box-sizing: border-box;
        }
        select {
            width: 100%;
            padding: 8px;
            margin: 5px 0;
        }
        input[type="submit"] {
            background-color: #2e5132;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background-color: #d3d35d;
        }
        button {
            background-color: #2e5132;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
        }
        button:hover {
            background-color: #d3d35d;
        }
    </style>
</head>

<body>
    <div class="container">
        <h2>Request a Quote</h2>

        
            <!-- Personal Information -->
            <label for="name">My Name is:</label>
            <input type="text" id="name" name="name" placeholder="Enter your name" required>

            <label for="company">Company:</label>
            <input type="text" id="company" name="company" placeholder="Enter your company name" required>

            <label for="contact">My Contact Number:</label>
            <input type="text" id="contact" name="contact" placeholder="Enter your contact number" required>

            <label for="email">Please Send My Quote To:</label>
            <input type="email" id="email" name="email" placeholder="Enter your email address" required>

            <label for="location">Please Include Delivery To:</label>
            <input type="text" id="location" name="location" placeholder="Enter delivery location" required>

            <label for="type">I am a:</label>
            <select id="type" name="type" required>
                <option value="Contractor">Contractor</option>
                <option value="DIY Customer">DIY Customer</option>
                <option value="Reseller">Reseller</option>
            </select>

            <!-- Product Quote Table -->
            <h3>Please quote me on the following items:</h3>
            <table id="product-table">
                <thead>
                    <tr>
                        <th>Product</th>
                        <th>Type</th>
                        <th>Size</th>
                        <th>Length</th>
                        <th>Quantity</th>
                        <th>Unit</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <select onchange="prefillProductData(this)">
                                <option disabled selected>Select a product</option>
                                <option value="Decking">Decking</option>
                                <option value="Flooring">Flooring</option>
                                <option value="Interior Cladding">Interior Cladding</option>
                                <option value="Exterior Cladding">Exterior Cladding</option>
                                <option value="Knotty Pine Ceiling">Knotty Pine Ceiling</option>
                                <option value="Structural Timber">Structural Timber</option>
                                <option value="Gum Poles">Gum Poles</option>
                                <option value="Laths">Laths</option>
                                <option value="Droppers">Droppers</option>
                                <option value="Garden Edging">Garden Edging</option>
                            </select>
                        </td>
                        <td><select name="type[]"></select></td>
                        <td><input type="number" name="size[]" placeholder="Enter size"></td>
                        <td><input type="number" name="length[]" placeholder="Enter length"></td>
                        <td><input type="number" name="quantity[]" placeholder="Enter quantity" required></td>
                        <td><select name="unit[]">
                            <option value="m²">m²</option>
                            <option value="m³">m³</option>
                            <option value="linear meters">linear meters</option>
                            <option value="Pieces">Pieces</option>
                            <option value="bundle of 10">bundle of 10</option>
                        </select></td>
                    </tr>
                </tbody>
            </table>

            <button type="button" onclick="addProductRow()">+ Add Product</button><br><br>

            <!-- Special Requests -->
            <h3>Special Requests:</h3>
            <textarea name="special_requests" rows="4"
                      placeholder="If you have any special requirements, let us know."></textarea>

            <!-- Submit Button -->
            <input type="submit" value="Submit Quote Request">

            <!-- Nonce field for security -->
            <?php wp_nonce_field('quote_form_nonce', 'nonce'); ?>
        
    </div>

    <script>
        function prefillProductData(selectElement) {
            const typeOptions = {
                "Decking": [
                    "22mm x 70mm Pine",
                    "22mm x 90mm Pine",
                    "22mm x 110mm Pine",
                    "20mm x 96mm Saligna"
                ],
                "Flooring": [
                    "22mm x 102mm Pine",
                    "32mm x 102mm Pine",
                    "20mm x 94mm Saligna"
                ],
                "Interior Cladding": [
                    "16mm x 102mm Pine T&G",
                    "22mm x 100mm Pine Log Profile"
                ],
                "Exterior Cladding": [
                    "22mm x 100mm CCA Pine Log Profile",
                    "32mm x 96mm CCA Pine Log Profile"
                ],
                "Knotty Pine Ceiling": [
                    "13mm x 65mm Pine",
                    "16mm x 102mm Pine"
                ],
                "Structural Timber": [
                    "Untreated S5 Graded 38x38",
                    "CCA Treated S5 Graded 38x50",
                    "Untreated Utility Grade 38x76",
                    "CCA Treated Utility Grade 38x114"
                ],
                "Gum Poles": [
                    "Round H4 Treated 50-75",
                    "Round H5 Treated 75-100",
                    "Square Cut H4 Treated 100-125",
                    "2 Sided Bearer H4 Treated 125-150"
                ],
                "Laths": [
                    "CCA H3 Treated 22-32",
                    "CCA H4 Treated and Sharpened"
                ],
                "Droppers": [
                    "CCA H3 Treated 32-45",
                    "CCA H4 Treated"
                ],
                "Garden Edging": [
                    "CCA H4 Treated 300mm",
                    "CCA H4 Treated 320mm",
                    "CCA H4 Treated 350mm"
                ]
            };

            const sizeOptionsMap = {
                "Structural Timber": [
                    "38x38",
                    "38x50",
                    "38x76",
                    "38x114",
                    "38x152",
                    "38x228",
                    "50x76",
                    "50x152",
                    "50x228",
                    "76x228"
                ],
                "Gum Poles": [
                    "50-75",
                    "75-100",
                    "100-125",
                    "125-150",
                    "150-175",
                    "175-200",
                    "200-225",
                    "225-250"
                ],
                "Laths": ["22-32"],
                "Droppers": ["32-45"],
                "Garden Edging": ["200mm", "300mm", "400mm"]
            };

            const lengthOptionsMap = {
                "Structural Timber": ["3.0", "3.6", "4.8", "6.0", "6.6"],
                "Gum Poles": [
                    "1.2",
                    "1.5",
                    "1.8",
                    "2.1",
                    "2.4",
                    "2.7",
                    "3.0",
                    "3.6",
                    "4.2",
                    "4.8",
                    "5.4",
                    "6.0",
                    "6.6",
                    "7.2",
                    "7.8",
                    "8.4",
                    "9.0",
                    "10.0",
                    "11.0",
                    "13.0"
                ],
                "Laths": ["1.5", "1.8", "2.1", "2.4", "3.0", "3.6", "4.5"],
                "Droppers": ["1.2", "1.5", "1.8", "2.1", "2.4"],
                "Garden Edging": ["2.0"]
            };

            const selectedProduct = selectElement.value;
            const row = selectElement.parentNode.parentNode;
            const typeSelect = row.querySelector('select[name^="type"]');
            const sizeInput = row.querySelector('input[name^="size"]');
            const lengthInput = row.querySelector('input[name^="length"]');

            typeSelect.innerHTML = '';

            if (typeOptions[selectedProduct]) {
                typeOptions[selectedProduct].forEach(type => {
                    const option = document.createElement('option');
                    option.value = type;
                    option.textContent = type;
                    typeSelect.appendChild(option);
                });
            }

            if (['Structural Timber', 'Gum Poles', 'Laths', 'Droppers', 'Garden Edging'].includes(selectedProduct)) {
                sizeInput.replaceWith(createDropdown('size', sizeOptionsMap[selectedProduct]));
                lengthInput.replaceWith(createDropdown('length', lengthOptionsMap[selectedProduct]));
            } else {
                sizeInput.replaceWith(createInput('size', 'Enter size'));
                lengthInput.replaceWith(createInput('length', 'Enter length'));
            }
        }

        function createDropdown(name, optionsArray) {
            const select = document.createElement('select');
            select.name = name + '[]';
            optionsArray.forEach(optionValue => {
                const option = document.createElement('option');
                option.value = optionValue;
                option.textContent = optionValue;
                select.appendChild(option);
            });
            return select;
        }

        function createInput(name, placeholder) {
            const input = document.createElement('input');
            input.type = 'number';
            input.name = name + '[]';
            input.placeholder = placeholder;
            return input;
        }

        function addProductRow() {
            const tableBody = document.querySelector("#product-table tbody");
            const newRow = document.createElement('tr');
            newRow.innerHTML = `
                <td>
                    <select onchange="prefillProductData(this)">
                        <option disabled selected>Select a product</option>
                        <option value="Decking">Decking</option>
                        <option value="Flooring">Flooring</option>
                        <option value="Interior Cladding">Interior Cladding</option>
                        <option value="Exterior Cladding">Exterior Cladding</option>
                        <option value="Knotty Pine Ceiling">Knotty Pine Ceiling</option>
                        <option value="Structural Timber">Structural Timber</option>
                        <option value="Gum Poles">Gum Poles</option>
                        <option value="Laths">Laths</option>
                        <option value="Droppers">Droppers</option>
                        <option value="Garden Edging">Garden Edging</option>
                    </select>
                </td>
                <td><select name="type[]"></select></td>
                <td><input type="number" name="size[]" placeholder="Enter size" required></td>
                <td><input type="number" name="length[]" placeholder="Enter length" required></td>
                <td><input type="number" name="quantity[]" placeholder="Enter quantity" required></td>
                <td><select name="unit[]">
                    <option value="m²">m²</option>
                    <option value="m³">m³</option>
                    <option value="linear meters">linear meters</option>
                    <option value="Pieces">Pieces</option>
                    <option value="bundle of 10">bundle of 10</option>
                </select></td>
            `;
            tableBody.appendChild(newRow);
        }

        // Handle form submission via AJAX
        document.getElementById('quote-form').addEventListener('submit', function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            formData.append('action', 'submit_quote_form');

            fetch(ajaxurl, {
                method: 'POST',
                body: formData,
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('Form submitted successfully.');
                } else {
                    alert('Form submission failed.');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Form submission failed.');
            });
        });
    </script>
</body>
</html>