JSFiddle - React, Tailwind, and code Playground

by jdarville

HTML

<div class='row' id="inputcontainer">
        <div class="form-group clearfix t" >
            <div class="col-md-2 col-md-offset-2">
                <div class="form-text-field first-name">
                    <label>First name</label>
                    <input type="text" id="firstName10" class="signup-input" name="" placeholder="">
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-text-field last-name">
                    <label>Last name</label>
                    <input type="text" id="lastName0" class="signup-input" name="" placeholder="optional">
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-text-field email">
                    <div>
                    <label>Email</label>
                    <input type="text" data-index="0" id="inputMail0" class="signup-input text-value add" name="email[0]"  placeholder="e.g. example@url.com"/>
                    <span class="common-sprite disNone sign-up-cross first"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
           
            <button type="button" id="more" name="more">Create More</button>

JavaScript

$("#more").click(".add",function(){


 
    $("#inputcontainer").append("<br />");
    $("#inputcontainer").append("First Name <input type='text' class='signup-input' name='' placeholder='' /><br />");
    $("#inputcontainer").append("last Name <input type='text' class='signup-input' name='' placeholder='optional' /><br />");
    $("#inputcontainer").append("Email Address <input type='text' data-index='0' class='signup-input text-value add' name='email[0]'  placeholder='e.g. example@url.com' /><br />");
})