BootStrap dynamic Form using json

HTML

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<br>
<form class="form-horizontal">
    <div id="criteriaFields">
        
    </div>
    <div class="control-group" id="osNames">
<label class="control-label left-align">ObjectStore : </label>
								<div class="controls">													
									<label class="radio inline radioLabel" for="textinput"><input
									type="radio" name="OS" class="OS allCssClass" value="ALL"
									checked="checked" /><span class="labelText">NONE</span>
									</label>
									<label class="radio inline radioLabel" for="textinput">
									<input type="radio" name="OS" class="OS" value="OSName"/><span class="labelText">OSName</span>
									</label>
									<label class="radio inline radioLabel" for="textinput">
									<input type="radio" name="OS" class="OS" value="OSName1"/><span class="labelText">OSName1</span>
									</label>										
								</div>
</div>
</form>
    


<div class="control-group" name="searchCriteria" id="criteria_field_template" style="display:none">
    <label class="control-label left-align" for="textinput"></label>
    <div class="controls">
        <input id="" name="searchCriteriaProp" name='searchCriterialProp' type='text' class='input-medium keypress' />
        <input name='propertyName' type='hidden' class='wcmFormText input-medium ' />
        <input name='propertySearchCriteria' type='hidden' class='wcmFormText input-medium' value='' />
    </div>
</div>

CSS

.control-label.left-align {
    text-align: left;
}

JavaScript

$(".OS").click(function () {
    var osName = $(this).val();
    var criteria_field_template;
    $("#criteriaFields").empty();
    if(uiPropsJSON[osName] != null){
    $.each(uiPropsJSON[osName], function (key, value) {
        if (typeof (value.PL) != 'undefined' || value.PL != null) {
            criteria_field_template = $("#criteria_field_template").clone().show();

            $(criteria_field_template).find(".control-label").html(value.PL + "<small> <i>" + value.PT + "</i></small>");
            $(criteria_field_template).find(".input-medium").attr("id", value.id);
            $(criteria_field_template).find("[name='propertySearchCriteria']").val(value.PSC);
           $(criteria_field_template).appendTo("#criteriaFields"); //$(criteria_field_template).insertBefore("#osNames");
        }

    });
  }

});




var uiPropsJSON = {
    "OSName": [{
        "PL": "Name",
            "PT": "Is like",
            "PSC": "Name Criteria",
            "id": "nameId"

    }, {
        "PL": "User ID",
            "PT": "In",
            "PSC": "User Criteria",
            "id": "userID"

    }, {
        "PL": "Emp ID",
            "PT": "In",
            "PSC": "Emp Criteria",
            "id": "empID"
    }, {
        "OtherData": "Other Data As Required"
    }],

        "OSName1": [{
        "PL": "Name11",
            "PT": "Is like",
            "PSC": "",
            "id": "nameId"

    }, {
        "PL": "User ID11",
            "PT": "In",
            "PSC": "",
            "id": "userID"

    }, {
        "PL": "Emp ID11",
            "PT": "In",
            "PSC": "",
            "id": "empID"
    }, {
        "OtherData": "Other Data As Required"
    }]
};