JSFiddle - React, Tailwind, and code Playground

by j08691

HTML

<fieldset id="buildyourform">
    <legend>Build your own form!</legend>
    <div class="fieldwrapper" name="field1" id="field1" />
    <input type="text" name="name" class="fieldname" id="tb1_1" />
    <input type="text" name="email" class="lastname" id="tb1_2" />
    <input type="button" value="+" class="add" id="add" />
    </div>
</fieldset>
<input type="submit" value="send" id="asdasd" name="submit" />

CSS

body {
     font-family:Gill Sans MT;
     padding:10px;
 }
 fieldset {
     border: solid 1px #000;
     padding:10px;
     display:block;
     clear:both;
     margin:5px 0px;
 }
 legend {
     padding:0px 10px;
     background:black;
     color:#FFF;
 }
 input.add {
     float:left;
     display:block;
     margin:5px;
 }
 input.fieldname {
     float:left;
     clear:left;
     display:block;
     margin:5px;
 }
 input.lastname {
     float:left;
     display:block;
     margin:5px;
 }
 input.remove {
     float:left;
     display:block;
     margin:5px;
 }
 #yourform label {
     float:left;
     clear:left;
     display:block;
     margin:5px;
 }
 #yourform input, #yourform textarea {
     float:left;
     display:block;
     margin:5px;
 }

JavaScript

$(document).ready(function () {
    $("#buildyourform").on('click', '#add', function () {
        var intId = $("#buildyourform div").length + 1;
        var fieldWrapper = $("<div class=\"fieldwrapper\" name=\"field" + intId + "\" id=\"field" + intId + "\"/>");
        var fName = $("<input type=\"text\" name=\"name\" class=\"fieldname\" id=\"tb" + intId + "_1\"/>");
        var lname = $("<input type=\"text\" name=\"email\" class=\"lastname\" id=\"tb" + intId + "_2\"/>");
        var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");

        var addButton = $("<input type=\"button\" class=\"add\" id=\"add\" value=\"+\" />")
        removeButton.click(function () {
            $(this).parent().remove();
        });
        fieldWrapper.append(fName);
        fieldWrapper.append(lname);
        fieldWrapper.append(removeButton);
        fieldWrapper.append(addButton);
        $(this).remove();
        $("#buildyourform").append(fieldWrapper);

    });

});