JSFiddle - React, Tailwind, and code Playground

by adrienne

HTML

<form id="settingsform" action="http://jsfiddle.net/echo/jsonp/">
<fieldset class="multifield_settingsrow">
    <label><span>Field Short Name</span><input type="text" name="multifield_short_name"  /></label>
        <label><span>Field Label</span><input type="text" name="multifield_label" /></label>
        <label><span>Field Type</span><select class="multifieldtypeselect" name="multifield_type" >
            <option value="">--Select One--</option>
            <option value="text">Single Line of Text</option>
            <option value="email">Email Address</option>
            <option value="url">URL</option>
            <option value="date">Date</option>
            <option value="number">Number</option>
            <option data-trigger="textarea-options"  value="textarea">Text Box</option>
            <option data-trigger="select-options" value="select">Dropdown</option>
            </select>
            </label>
    <label class="fieldoptions select-options"><span>Field Options</span><textarea name="multifield_options"></textarea></label>
    <label class="fieldoptions textarea-options"><span>Textarea Rows</span><input type="number" name="multifield_options" /></label>
</fieldset>

    <input type="hidden" id="multinumrows" name="multifield_numrows" value="0" />
<button id="duplicaterow">Give me another field!</button>
    <input type="submit" id="submitbutton" value="Submit" />
</form>

CSS

fieldset label { display: block; width: 100%;  }
fieldset label span { display: inline-block; width: 160px; vertical-align: top; }

JavaScript

$(".fieldoptions").hide();
var blanksettingsrow = $(".multifield_settingsrow:first").clone();
var itemnum = 0;   
// add 0 to the end of the first row names
$(".multifield_settingsrow:first").find(":input").each(function() {
       var myname = $(this).attr("name");
        $(this).attr("name",myname+"["+itemnum+"]");
    });
 
$("body").on("change",".multifieldtypeselect",function(e) {
   var me = $(this);   
    var myval = me.val();
    var myoptdata = me.find("option[value='"+myval+"']").data("trigger");
    if(typeof(myoptdata) !== 'undefined') {
me.parents(".multifield_settingsrow").find("."+myoptdata).show();
        me.parents(".multifield_settingsrow").find(".fieldoptions:hidden").remove();
    }
});
$("body").on("click","#duplicaterow",function(e) {
        newrow = blanksettingsrow.clone();
    ++itemnum;
    newrow.find(":input").each(function() {
       var myname = $(this).attr("name");
        $(this).attr("name",myname+"["+itemnum+"]");
    });
        newrow.insertBefore($(this));
    $("#multinumrows").val(itemnum);
        return false;
    });