JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

<ul id="controlField" class="draggable">
    <li><a data-type="text">Activity Name</a></li>
    <li><a data-type="textarea">Activity Objective</a></li>
    <li><a data-type="checkboxlist">New Field Region</a></li>
    <li><a data-field='{"DataType":"text","ElementType":"input","ElementId":"field1","ElementName":"field1","ElementClass":"","FormElementId":"0","Label":"Activity","LabelId":"label1","LabelFor":"field1","ValidateFunction":"","Value":""}'>Test</a></li>
</ul>

<ul id="formField" class="droppable">
    <li>Title Form</li>
</ul>

CSS

.droppable { border:1px dashed #ccc; padding:20px 50px;}

JavaScript

$(document).ready(function() {
    var data = {
        "IncElements" : "3",
        "FieldElements" : [
            {
                "DataType" : "text",
                "ElementType" : "input",
                "ElementId" : "field1",
                "ElementName" : "field1",
                "ElementClass" : "",
                "FormElementId" : "0",
                "Label" : "Activity",
                "LabelId" : "label1",
                "LabelFor" : "field1",
                "ValidateFunction" : "",
                "Value" : ""
            },
            {
                "DataType" : "text",
                "ElementType" : "input",
                "ElementId" : "field2",
                "ElementName" : "field2",
                "ElementClass" : "",
                "FormElementId" : "0",
                "Label" : "Activity Objective",
                "LabelId" : "label2",
                "LabelFor" : "field2",
                "ValidateFunction" : "",
                "Value" : ""
            }
        ]
    }
    
    var output = "";
    /*
    $.each(data, function(data, elements) {
        alert(data.IncElements);
        $.each(elements, function(data, keys) {
        alert(keys.DataType);
        });
    });
    */
    $.each(data.FieldElements, function(data,keys) {
        output += '<li ' + 'id=' + '"' + keys.LabelId + '"' + '>';
        output += '<label ' + 'id=' + '"' + keys.LabelId + '"' + 'for=' + '"' + keys.LabelFor + '"' + '>' + keys.Label + '</label>';
        output += '<div>';
        if (keys.ElementType == 'input') {
            output += '<input ' + 'id=' + '"' + keys.ElementId + '"' + 'name=' + '"' + keys.ElementName + '"' + 'type=' + '"' + keys.DataType + '"' + '/>';
        } else if (keys.ElementType == 'textarea') {

        } else if (keys.ElementType == 'select') {

        }
        output += '</div>';
        output += '</li>';
    });
    //$('#formField').append(output);
    
    
  
    function addInput(type) {
        var...