JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="wrap">
        
        <form>
            <p>
                <label>Name:</label> <input type="text">
                <label>Age:</label> <input type="text">
                <span class="remove">Remove</span>
            </p>
            <p>
                <span class="add">Add fields</span>
            </p>
        </form>
        
    </div>

CSS

body { font-family:Tahoma; font-size:12px; margin:20px; cursor:default; }
        input { border:1px solid #aaa; }
        p { margin:10px 0; }
        p:first-child span { display:none; }
        span { text-decoration:underline; }
        span:hover { background-color:#ff0; cursor:pointer; }
        .remove { color:red; }
        .add { color:green; }

JavaScript

$(document).ready(function() {
        
            $(".add").click(function() {
                $("form > p:first-child").clone(true).insertBefore("form > p:last-child");
                return false;
            });
            
            $(".remove").click(function() {
                $(this).parent().remove();
            });
        
        });