JSFiddle - React, Tailwind, and code Playground

by WOUNDEDStevenJones

HTML

<form enctype="application/x-www-form-urlencoded" method="post" action="/admin/customform/save/">
    <div class="zend_form">
        <input type="hidden" name="id" value="37" id="id">
<dt id="title-label"><label for="title" class="required">Title *</label></dt>

        <input type="text" name="title" id="title" value="email" maxlength="50">
<dt id="slug-label"><label for="slug" class="required">Slug *</label></dt>

        <input type="text" name="slug" id="slug" value="email" readonly="1" maxlength="250">
        <ul class="sortable"></ul>
<dt id="elementType_0-label"><label for="elementType_0" class="required">Element Type *</label></dt>

        <select name="elementType_0" id="elementType_0">
            <option value="select" label="Select One...">Select One...</option>
            <option value="Input" label="Input Field">Input Field</option>
            <option value="TextField" label="Text Field">Text Field</option>
            <option value="Radio" label="Radio Button Group">Radio Button Group</option>
            <option value="CheckBox" label="Check Box">Check Box</option>
            <option value="DropDownListDOB" label="Drop Down List (DOB)">Drop Down List (DOB)</option>
            <option value="DropDownListCustom" label="Drop Down List (Custom)">Drop Down List (Custom)</option>
            <option value="EmailAddress" label="Email Address" selected="selected">Email Address</option>
            <option value="StateDropDown" label="State Drop Down">State Drop Down</option>
            <option value="TermsAndConditions" label="Terms &amp; Conditions">Terms &amp; Conditions</option>
        </select>
<a href="#" class="cf-remove-element">(X)</a>

<dt id="elementRequired_0-label"><label class="required">Is this item required? *</label></dt>

        <label for="elementRequired_0-yes">
            <input type="radio" name="elementRequired_0" id="elementRequired_0-yes" value="yes" checked="checked">Yes</label>
        <br>
        <label...

CSS

.wrapped {
    border: 2px red solid;
}

JavaScript

$(document).ready(function () {
   if ($('#elementType_0-label').length) {
        var i = 0;
        var lastItem;
        var max;
        var j=0;
        
        while ($('#elementType_'+j+'-label').length) {
            j++;
        }
        max = j;
        
        for (i; i<max; i++) {
            if ($('#elementType_'+(i+1)+'-label').length) {
                lastItem = $('#elementType_'+(i+1)+'-label');
            } else {
                lastItem = $('#add-fields-button');
            }
            $('#elementType_'+i+'-label').nextUntil(lastItem).andSelf().wrapAll('<div class="wrapped" />');
        }
                
        $(".sortable").sortable();
    } else {
        //add the list to add items to
        $('#slug').after('<ul class="sortable">');
        $('#add-fields-button').before('</ul>');
        $(".sortable").sortable();
    }
});