In the following code for under the product quote table is it possible to make one row visible and to add an '+ add product' if user wants to add more products and i want it to work like this, if user clicks add product there must come a list of products that the user can choose from, the users clicks on the new product and automatically all data from newly added product row should be pre-filled and also the user can add multiple products:
<!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;
        }
    </style>
</head>

<body>

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

        <form action="/submit_quote" method="POST">
            <!-- 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>
                <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><input type="text" name="product1" value="Decking" readonly></td>
                        <td>
                            <select name="type1">
                                <option value="22mm x 70mm Pine">22mm x 70mm Pine</option>
                                <option value="22mm x 90mm Pine">22mm x 90mm Pine</option>
                                <option value="22mm x 110mm Pine">22mm x 110mm Pine</option>
                                <option value="20mm x 96mm Saligna">20mm x 96mm Saligna</option>
                            </select>
                        </td>
                        <td><input type="number" name="size1" placeholder="Enter size"></td>
                        <td><input type="number" name="length1" placeholder="Enter length"></td>
                        <td><input type="number" name="quantity1" placeholder="Enter quantity"></td>
                        <td>
                            <select name="unit1">
                                <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>
                    <tr>
                        <td><input type="text" name="product2" value="Flooring" readonly></td>
                        <td>
                            <select name="type2">
                                <option value="22mm x 102mm Pine">22mm x 102mm Pine</option>
                                <option value="32mm x 102mm Pine">32mm x 102mm Pine</option>
                                <option value="20mm x 94mm Saligna">20mm x 94mm Saligna</option>
                            </select>
                        </td>
                        <td><input type="number" name="size2" placeholder="Enter size"></td>
                        <td><input type="number" name="length2" placeholder="Enter length"></td>
                        <td><input type="number" name="quantity2" placeholder="Enter quantity"></td>
                        <td>
                            <select name="unit2">
                                <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>
                    <tr>
                        <td><input type="text" name="product3" value="Interior Cladding" readonly></td>
                        <td>
                            <select name="type3">
                                <option value="16mm x 102mm Pine T&G">16mm x 102mm Pine T&G</option>
                                <option value="22mm x 100mm Pine Log Profile">22mm x 100mm Pine Log Profile</option>
                            </select>
                        </td>
                        <td><input type="number" name="size3" placeholder="Enter size"></td>
                        <td><input type="number" name="length3" placeholder="Enter length"></td>
                        <td><input type="number" name="quantity3" placeholder="Enter quantity"></td>
                        <td>
                            <select name="unit3">
                                <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>
                    <tr>
                        <td><input type="text" name="product4" value="Exterior Cladding" readonly></td>
                        <td>
                            <select name="type4">
                                <option value="22mm x 100mm CCA Pine Log Profile">22mm x 100mm CCA Pine Log Profile
                                </option>
                                <option value="32mm x 96mm CCA Pine Log Profile">32mm x 96mm CCA Pine Log Profile
                                </option>
                            </select>
                        </td>
                        <td><input type="number" name="size4" placeholder="Enter size"></td>
                        <td><input type="number" name="length4" placeholder="Enter length"></td>
                        <td><input type="number" name="quantity4" placeholder="Enter quantity"></td>
                        <td>
                            <select name="unit4">
                                <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>
                    <tr>
                        <td><input type="text" name="product5" value="Knotty Pine Ceiling" readonly></td>
                        <td>
                            <select name="type5">
                                <option value="13mm x 65mm Pine">13mm x 65mm Pine</option>
                                <option value="16mm x 102mm Pine">16mm x 102mm Pine</option>
                            </select>
                        </td>
                        <td><input type="number" name="size5" placeholder="Enter size"></td>
                        <td><input type="number" name="length5" placeholder="Enter length"></td>
                        <td><input type="number" name="quantity5" placeholder="Enter quantity"></td>
                        <td>
                            <select name="unit5">
                                <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>
                    <tr>
                        <td><input type="text" name="product6" value="Structural Timber" readonly></td>
                        <td>
                            <select name="type6">
                                <option value="Untreated S5 Graded 38x38">Untreated S5 Graded</option>
                                <option value="CCA Treated S5 Graded 38x50">CCA Treated S5 Graded</option>
                                <option value="Untreated Utility Grade 38x76">Untreated Utility Grade</option>
                                <option value="CCA Treated Utility Grade 38x114">CCA Treated Utility Grade</option>
                            </select>
                        </td>
                        <td>
                            <select name="size6">
                                <option value="38x38">38x38</option>
                                <option value="38x50">38x50</option>
                                <option value="38x76">38x76</option>
                                <option value="38x114">38x114</option>
                                <option value="38x152">38x152</option>
                                <option value="38x228">38x228</option>
                                <option value="50x76">50x76</option>
                                <option value="50x152">50x152</option>
                                <option value="50x228">50x228</option>
                                <option value="76x228">76x228</option>
                            </select>
                        </td>
                        <td>
                            <select name="length6">
                                <option value="3.0">3.0</option>
                                <option value="3.6">3.6</option>
                                <option value="4.8">4.8</option>
                                <option value="6.0">6.0</option>
                                <option value="6.6">6.6</option>
                            </select>
                        </td>
                        <td><input type="number" name="quantity6" placeholder="Enter quantity"></td>
                        <td>
                            <select name="unit6">
                                <option value="Pieces">Pieces</option>
                                <option value="m²">m²</option>
                                <option value="m³">m³</option>
                                <option value="linear meters">linear meters</option>
                                <option value="bundle of 10">bundle of 10</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="text" name="product7" value="Gum Poles" readonly></td>
                        <td>
                            <select name="type7">
                                <option value="Round H4 Treated 50-75">Round H4 Treated</option>
                                <option value="Round H5 Treated 75-100">Round H5 Treated</option>
                                <option value="Square Cut H4 Treated 100-125">Square Cut H4 Treated</option>
                                <option value="2 Sided Bearer H4 Treated 125-150">2 Sided Bearer H4 Treated</option>
                            </select>
                        </td>
                        <td>
                            <select name="size7">
                                <option value="50-75">50-75</option>
                                <option value="75-100">75-100</option>
                                <option value="100-125">100-125</option>
                                <option value="125-150">125-150</option>
                                <option value="150-175">150-175</option>
                                <option value="175-200">175-200</option>
                                <option value="200-225">200-225</option>
                                <option value="225-250">225-250</option>
                            </select>
                        </td>
                        <td>
                            <select name="length7">
                                <option value="1.2">1.2</option>
                                <option value="1.5">1.5</option>
                                <option value="1.8">1.8</option>
                                <option value="2.1">2.1</option>
                                <option value="2.4">2.4</option>
                                <option value="2.7">2.7</option>
                                <option value="3.0">3.0</option>
                                <option value="3.6">3.6</option>
                                <option value="4.2">4.2</option>
                                <option value="4.8">4.8</option>
                                <option value="5.4">5.4</option>
                                <option value="6.0">6.0</option>
                                <option value="6.6">6.6</option>
                                <option value="7.2">7.2</option>
                                <option value="7.8">7.8</option>
                                <option value="8.4">8.4</option>
                                <option value="9.0">9.0</option>
                                <option value="10.0">10.0</option>
                                <option value="11.0">11.0</option>
                                <option value="13.0">13.0</option>
                            </select>
                        </td>
                        <td><input type="number" name="quantity7" placeholder="Enter quantity"></td>
                        <td>
                            <select name="unit7">
                                <option value="Pieces">Pieces</option>
                                <option value="m²">m²</option>
                                <option value="m³">m³</option>
                                <option value="linear meters">linear meters</option>
                                <option value="bundle of 10">bundle of 10</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="text" name="product8" value="Laths" readonly></td>
                        <td>
                            <select name="type8">
                                <option value="CCA H3 Treated 22-32">CCA H3 Treated</option>
                                <option value="CCA H4 Treated and Sharpened">CCA H4 Treated and Sharpened</option>
                            </select>
                        </td>
                        <td>
                            <select name="size8">
                                <option value="22-32">22-32</option>
                            </select>
                        </td>
                        <td>
                            <select name="length8">
                                <option value="1.5">1.5</option>
                                <option value="1.8">1.8</option>
                                <option value="2.1">2.1</option>
                                <option value="2.4">2.4</option>
                                <option value="3.0">3.0</option>
                                <option value="3.6">3.6</option>
                                <option value="4.5">4.5</option>
                            </select>
                        </td>
                        <td><input type="number" name="quantity8" placeholder="Enter quantity"></td>
                        <td>
                            <select name="unit8">
                                <option value="bundle of 10">bundle of 10</option>
                                <option value="m²">m²</option>
                                <option value="m³">m³</option>
                                <option value="linear meters">linear meters</option>
                                <option value="Pieces">Pieces</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="text" name="product9" value="Droppers" readonly></td>
                        <td>
                            <select name="type9">
                                <option value="CCA H3 Treated 32-45">CCA H3 Treated</option>
                                <option value="CCA H4 Treated">CCA H4 Treated</option>
                            </select>
                        </td>
                        <td>
                            <select name="size9">
                                <option value="32-45">32-45</option>
                            </select>
                        </td>
                        <td>
                            <select name="length9">
                                <option value="1.2">1.2</option>
                                <option value="1.5">1.5</option>
                                <option value="1.8">1.8</option>
                                <option value="2.1">2.1</option>
                                <option value="2.4">2.4</option>
                            </select>
                        </td>
                        <td><input type="number" name="quantity9" placeholder="Enter quantity"></td>
                        <td>
                            <select name="unit9">
                                <option value="bundle of 10">bundle of 10</option>
                                <option value="m²">m²</option>
                                <option value="m³">m³</option>
                                <option value="linear meters">linear meters</option>
                                <option value="Pieces">Pieces</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="text" name="product10" value="Garden Edging" readonly></td>
                        <td>
                            <select name="type10">
                                <option value="CCA H4 Treated 300mm">CCA H4 Treated</option>
                                <option value="CCA H4 Treated 320mm">CCA H4 Treated</option>
                                <option value="CCA H4 Treated 350mm">CCA H4 Treated</option>
                            </select>
                        </td>
                        <td>
                            <select name="size10">
                                <option value="200mm">200mm</option>
                                <option value="300mm">300mm</option>
                                <option value="400mm">400mm</option>
                            </select>
                        </td>
                        <td>
                            <select name="length10">
                                <option value="2.0">2.0</option>
                            </select>
                        </td>
                        <td><input type="number" name="quantity10" placeholder="Enter quantity"></td>
                        <td>
                            <select name="unit10">
                                <option value="Pieces">Pieces</option>
                                <option value="m²">m²</option>
                                <option value="m³">m³</option>
                                <option value="linear meters">linear meters</option>
                                <option value="bundle of 10">bundle of 10</option>
                            </select>
                        </td>
                    </tr>
                </tbody>
            </table>

            <!-- 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">
        </form>
    </div>

</body>

</html>