JSFiddle - React, Tailwind, and code Playground

by dav sev

HTML

<form id="config" method="post" action="config.php" >
    <fieldset id="buildyourform">
        <legend>Build your own form!</legend>

  
            <div class="fieldwrapper" id="field1"><label>Field Name</label><input type="text" name="inputName[]" class="required"><br><label>
    <label>
    Tag</label><input type="text" name="inputTag[]" class="required"><br><input type="button" class="remove" value="Remove"></div>
        

   
    </fieldset>
    <input type="button" value="Add a field" class="add" id="add" />
    <input type="submit" value="Submit">
    
        </form>

JavaScript

$(document).ready(function() {
        $("#add").click(function() {
            var intId = $("#buildyourform div").length + 1;
            var label = $("<label>Field Name</label>");
            var labelTag = $("<label>Tag</label>");
            var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
            var fName = $("<input type=\"text\" name=\"inputName[]\" class=\"required\" />");
            var fTag = $("<input type=\"text\" name=\"inputTag[]\" class=\"required\" />");

            var removeButton = $("<input type=\"button\" class=\"remove\" value=\"Remove\" />");
            removeButton.click(function() {
                $(this).parent().remove();
            });
            
            fieldWrapper.append(label);
            fieldWrapper.append(fName);
        //    fieldWrapper.append('<br>');
            fieldWrapper.append(labelTag);
            fieldWrapper.append(fTag);
         //   fieldWrapper.append('<br>');
            fieldWrapper.append(removeButton);
            $("#buildyourform").append(fieldWrapper);
        });
    });