CODEWITHSUNDEEP
javascripthtmlcss
Kali
Kali

Reputation: 93

How to copy this section of a webpage when a link is clicked?

I'm trying to copy a section of a webpage when a link is clicked so that the section is recreated underneath the previous section just like how this works in this image as example- image

I'm doing this on google apps script and here is my code

code.gs

function doGet(e) {
    return HtmlService.createHtmlOutputFromFile('HTML')
        .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

HTML.html

<html>
<head>
    <base target="_top">

    <style type="text/css">
        .contentBackground {
            background-color: #D8D8D8;
            clear: left;
            width: 60%;
            margin: auto;
            height: 200px display: block;
        }

        .uploadFile p {
            text-align: center;
            padding: 20px;
            color: red;
        }

        .content p {
            text-align: center;
            color: red;
            padding: 7px;
        }

        .dropDown p {
            text-align: center;
            padding: 40px;
            margin-left: 8px;
            height:;
        }

        .moreFiles {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="contentBackground">
        <div class="uploadWrapper">
            <div class="fileUpload">
                <div class="uploadFile">
                    <p>Upload File: <span style="color:black"><input type="file" name="uploadField" /></span></p>
                </div>

                <div class="content">
                    <p>Width(Inch) <input type="text" style="width: 100px"> Height(Inch) <input type="text" style="width: 100px"> Quantity <input type="text" style="width: 100px"></p>
                </div>
            </div>
        </div>

        <div class="dropDown">
            <p>
                Material <select style="max-width: 10%;">
                    <option value="Paper">Paper</option>
                    <option value="Vinyl Banner">Vinyl Banner</option>
                    <option value="Adhesive Vinyl">Adhesive Vinyl</option>
                    <option value="Polygloss">Polygloss</option>
                    <option value="Translucent Vinyl">Translucent Vinyl</option>
                    <option value="Static Cling Clear">Static Cling Clear</option>
                    <option value="Static Cling White">Static Cling White</option>
                    <option value="Reverse Static Cling">Reverse Static Cling</option>
                    <option value="Outdoor Paper">Outdoor Paper</option>
                    <option value="Backlit Film">Backlit Film</option>
                    <option value="Foam">Foam</option>
                    <option value="Coroplast">Coroplast</option>
                    <option value="Corrugated Board">Corrugated Board</option>
                    <option value="Sintra">Sintra</option>
                    <option value="Canvas">Canvas</option>
                    <option value="Fabric">Fabric</option>
                    <option value="All Cling">All Cling</option>
                </select>
                Lamination <select>
                    <option value="None">None</option>
                    <option value="Matte">Matte</option>
                    <option value="Gloss">Gloss</option>
                    <option value="Lexan">Lexan</option>
                    <option value="Erasable">Erasable</option>
                </select>
                Mounting <select>
                    <option value="3/16&quot Foam">3/16" Foam</option>
                    <option value="3/16&quot Gator">3/16" Gator</option>
                    <option value="1/8&quot Sintra">1/8" Sintra</option>
                    <option value="24point Card">24point Card</option>
                    <option value="50point Card">50point Card</option>
                    <option value="Adhesive Back">Adhesive Back</option>
                    <option value="MDF">MDF</option>
                    <option value="Coroplast">Coroplast</option>
                    <option value="Masonite">Masonite</option>
                    <option value="020 Styrene">020 Styrene</option>
                    <option value="040 Styrene">040 Styrene</option>
                    <option value="060 Styrene">060 Styrene</option>
                    <option value="080 Styrene">080 Styrene</option>
                    <option value="Corrugated Board">Corrugated Board</option>
                </select>
                Ink <select>
                    <option value="Indoor">Indoor</option>
                    <option value="Outdoor">Outdoor</option>
                </select>
            </p>
        </div>
    </div>
    <div class="moreFiles">
        <a href="#" id="add">Add another file?</a>
    </div>
</body>
</html>

Upvotes: 6

Views: 138

Answers (1)

Travis Clarke
Travis Clarke

Reputation: 6661

If you opt to use jQuery, then you can use the .clone() method.

$("#add").on("click", function () {
     var $last = $(".contentBackground").last();
     $last.clone().insertAfter($last);
});

JSFiddle

Upvotes: 2

Related Questions