Field Builder form

Empty project with attached libraries

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div class="jqx-widget as-content-left">
    <table class="as-left-menu-table">
        <tr>
            <td class="as-td-label">Тест</td>
            <td class="as-td-field">
                <div id="testList"></div>
            </td>
        </tr>
        <tr>
            <td class="as-td-label">Название поля</td>
            <td class="as-td-field">
                <input id="fieldName" class="as-field-builder-input"/>
            </td>
        </tr>
        <tr>
            <td class="as-td-label">Тип подписи</td>
            <td class="as-td-field">
                <div id="labelTypeText">Простая подпись</div>
                <div id="labelTypeList">Список</div>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <div id="labelSource" style="display: none;">
                <div id="labelSourceType">
                    <div id="labelSourceTypeDb">База данных</div>
                    <div id="labelSourceTypeList">Перечисление</div>
                </div>
                <div id="sourceTypeDb" style="display:none;">
                    <div>Название коллекции</div>
                    <div id="sourceDb"></div>
                    <div>Название поля для отображения</div>
                    <div id="sourceDbLabel"></div>
                </div>
                <div id="sourceTypeStatic" style="display: none;">
                    <input id="addToSourceDataText" type="text" class="as-field-builder-input"/>
                    <input id="addToSourceData" type="button" value="Добавить" />
                    <input id="delToSourceData" type="button" value="Удалить" />
                    <div id="sourceData" />
                </div>
                </div>
       ...

CSS

.as-form-label {
    padding: 0 0 0 0;
    width:200px;
    text-align: right;
}
.as-left-menu-table {
    width: 466px;
}
.as-content-left {
    overflow-y: scroll;
    width:482px;
}
.as-td-label {
    text-align: right;
}
.as-td-field {
    width: 250px;
}
.as-disable {
}
.as-field-builder-input {
    
}
.as-constructor-field {
    
}

JavaScript

$(document).ready(function () {
                
    var v = 'rating';
    var url = '/echo/json/';
    var source = {
            type : "POST",
			datatype : "json",
        data: {json: JSON.stringify({data:[{'_id':'1', 'entId':'aaa', 'rating':1},{'_id':'2', 'entId':'aaa','rating':2},{'_id':'3', 'entId':'aaa','rating':3}]})},
			datafields : [
                        
                    ],
			id : '_id',
			url : url
		};
	var settings = {
			loadServerData : function(serverdata, source, callback) {
				$.ajax({
					type : source.type,
					contentType : "application/json; charset=utf-8",
					dataType : source.datatype,
					url : source.url,
                    data : source.data,
					success : function(data, status, xhr) {
                        alert(status + ' ' + JSON.stringify(data));
						callback({
							records : data.data
						});
					},
					error : function(xhr, textStatus, errorThrown) {
						alert(xhr.responseText);
					}
				});
			}
		}
    var da = new $.jqx.dataAdapter(source, settings);
                // Create a jqxListBox
                $("#testList").jqxListBox({ source: da, displayMember: v, valueMember: "_id", width: 200, height:50});

    
    var model = function () {};

    var txt = $("#fieldName");



    $(".as-field-builder-input").jqxInput({
        width: 250
    });

    $("#labelTypeText").jqxRadioButton({
        width: 250, height: 20,
        checked: true,
        groupName: "labelType"
    }).on("checked", function () {
        $("#labelSource").hide();
    });
    
    $("#labelTypeList").jqxRadioButton({
        width: 250, height: 20, groupName: "labelType"
    }).on("checked", function(){
        $("#labelSource").show();
    });
    
    $("#labelSourceTypeDb").jqxRadioButton({
        width: 250, height: 20, groupName: "labelSourceType"
    });
    $("#labelSourceTypeList").jqxRadioButton({
        width: 250, height: 20, groupName: "labelSourceType"
    });
    
   ...