JSFiddle - React, Tailwind, and code Playground

by psoares

HTML

<form action="/Config.aspx/SDKHome/SaveSections" id="SaveSections" method="post">
                <input name="[0].SchemaName" type="hidden" value="contactSection" />

            <ul creator="attrCreator" data-dojo-type="dojo.dnd.Source" class="section container dojoDndSource"
                style="list-style-type: none;">

                <li class="dojoDndItem">
                            <input name="[0].DefinedAttributes[0].SchemaName" type="text" value="firstname" />
                </li>

                <li class="dojoDndItem">
                            <input name="[0].DefinedAttributes[1].SchemaName" type="text" value="jobtitle" />
                </li>
            </ul>
   </form>

JavaScript

dojo.require("dojo.dnd.Source");   
dojo.ready(function(){
    var ul = dojo.query("ul.section").pop();
    var lastLiInput = dojo.query("ul li:last-child>input").pop(); 
    var lastLiInputName = dojo.attr(lastLiInput, "name");   
    var X = 1 + parseInt(lastLiInputName.replace(/.*DefinedAttributes\[(\d+)\].*/, '$1'));
    var newLi = dojo.create("li", { class : "dojoDndItem" }, ul);
    dojo.create("input", {
        name : "[0].DefinedAttributes[" + X + "].SchemaName",
        type : "text",
        value : "otherValue"
    }, newLi);
    
     
});