JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

<!-- FORMBUILDER -->
<div class="drags">
    <h3>Sections</h3>
    <ul class="dragsection">
        <li data-type="section">section</li>
        <li data-type="break">break</li>
    </ul>
</div>
<div class="drops">
    <div class="dropsection grid">
        <!-- drop section -->
    </div>
</div>

CSS

*{margin:0; box-sizing:border-box;}
.dropsection { padding:10px; border:1px solid #ccc; background-color:#eee;}
.dropblock { padding:10px; border:1px solid #ccc; background-color:#fff; list-style:none;}
.dropblock li { padding:10px; border:1px solid #ccc; background-color:#efefef;}
.grid { padding:10px; border:1px solid #ccc; background-color:#eee;}
.button { margin-right:5px; cursor:pointer;}

JavaScript

/*
    1/ Load Data
    2/ Load Controls and Fields
    3/ Initiating Drag Section and Drag Block
*/

var FormBuilder = (function () {
    var config = {
        css: {
            classname: "",
            id: "",
            styles: {}
        },
        settings: {
            urls: {},
            controls: {
                dragsection: ".dragsection",
                dropsection: ".dropsection",
                dragblock: ".dragblock",
                dropblock: ".dropblock"
            }
        }
    }

    var dragsection = config.settings.controls.dragsection;
    var dropsection = config.settings.controls.dropsection;
    var dragblock = config.settings.controls.dragblock;
    var dropblock = config.settings.controls.dropblock;

    var secId = 0;
    var data = {sections:[],blocks:[]};
    var objForm = {
        UDFormId: 0,
        FormTypeId: 0,
        OrgId: 0,
        FormName: "",
        FormDescription: "",
        IsDeleted: "",
        IsPublished: "",
        Template: {
            TemplateId: 0,
            DropSections:[],
            DropBlocks:[],
            Settings:[],
            Css:[]
        }
    }

    var Form = (function() {
        // form object function
        function update(){}

        return {
            update: update
        }
    })();

    function getCSS() {}

    function getButton(id, t) {
        var button = $(document.createElement('span')).attr({class: 'control'});
        var removesection = $(document.createElement('a')).attr({ class: 'button btn-remove' }).html('remove');
        var editsection = $(document.createElement('a')).attr({ class: 'button btn-edit' }).html('edit');
        var removeblock = $(document.createElement('a')).attr({ class: 'button btn-remove' }).html('remove');
        var editblock = $(document.createElement('a')).attr({ class: 'button btn-edit' }).html('edit');

        $(removesection).on('click', function () {
            $(dropsection).find('[data-id="' + id +...