JSFiddle - React, Tailwind, and code Playground

This is a simple example for jQuery.dForm

by Graham Dixon

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script src="http://daffl.github.io/jquery.dform/release/jquery.dform-1.1.0.js"></script>
<script src="https://lasdashboard.co.uk/BuildForm/JS/jquery.gform/jquery.htmlClean.js"></script>
<div id="somediv">
    
<div> <p> Converting DOM to daffls dForm JSON structure </p> </div>

  <ul id="test-ul-1" class="test">
    <li id="test-ul-1-li-1">        
        <ul id="test-ul-1-li-1-ul-1">
            <li id="test-ul-1-li-1-ul-1-li-1" style="background:#CCC;color:#000;"><a>test</a></li>
            <li id="test-ul-1-li-1-ul-1-li-2"><a>test</a></li>
            <li id="test-ul-1-li-1-ul-1-li-3"><a>test</a></li>
        </ul>
      </li>
    <li id="test-ul-1-li-2">test</li>
    <li id="test-ul-1-li-3">test</li>
  </ul>
        <div id="composer"> </div>
</div>

<div id="putResult"> </div>

<div id="myform"> </div>

CSS

#putResult{
    border-top:1px solid #bcbcbc;
    border-bottom:1px solid #bcbcbc;
    background:#ececec;
    margin:10px;
    padding:10px;
}

JavaScript

var dForm = {"type":"div","id":"composer","html":[{
    "type" : "select",
    "id" : "testsel",
    "options" : {
        "us" : "USA",
        "ca" : "Canada",
        "de" : {
            "selected" : "selected",
            "html" : "Germany"
        }
    }
},{"type":"fieldset","captionaid":"Form","caption":"Form","class":"ui-dform-fieldset topBlock","id":"formHolder","html":[{"type":"fieldset","captionaid":"Repeatable Block Container","caption":"Repeatable Block Container","class":"ui-dform-fieldset repeatContainer","id":"RepeatContainer${counter1}","html":[{"type":"fieldset","captionaid":"Main Block ${counter1}","caption":"Main Block ${counter1}","class":"ui-dform-fieldset block","depth":"html.0.html.0","id":"Repeatable${counter1}","html":[{"type":"div","class":"gForm-containers ui-dform-div","depth":"html.0.html.0.html.0","id":"Container${counter1}","align":"center","html":[{"type":"div","class":"ui-dform-div ui-dform-Container-div","depth":"html.0.html.0.html.0.html.0","align":"center","html":[{"type":"span","class":"ui-dform-span ui-gform-element fieldLabel","depth":"html.0.html.0.html.0.html.0.html.0","html":"Email"},{"type":"span","class":"ui-dform-span ui-gform-element spanInfo","depth":"html.0.html.0.html.0.html.0.html.1","title":"This is an email field","html":"Info"},{"type":"email","class":"ui-dform-email ui-gform-element","depth":"html.0.html.0.html.0.html.0.html.2","minlength":"10","required":"required","id":"email${counter1}","name":"email[${counter1}]"}]},{"type":"div","class":"ui-dform-div ui-dform-Container-div","depth":"html.0.html.0.html.0.html.1","align":"center","html":[{"type":"span","class":"ui-dform-span ui-gform-element fieldLabel","depth":"html.0.html.0.html.0.html.1.html.0","html":"Password"},{"type":"span","class":"ui-dform-span ui-gform-element spanInfo","depth":"html.0.html.0.html.0.html.1.html.1","title":"This is a password field","html":"Info"},{"type":"password","placeholder":"test","class":"ui-dform-password...