Dynamic JSON Forms using jQuery only

by wrxsti85

HTML

<div class="navContainer">
    <ul id="mainNav1">
        <li data-form-id="0">Form 0</li>
        <li data-form-id="1">Form 1</li>
        <li data-form-id="2">Form 2</li>
    </ul>
</div>
<div class="formContainer"></div>

CSS

body {
    margin: 0px;
    padding: 0px;
    font-family: helvetica;
    font-size: 12px;
    color: #4679bd;
}
#mainNav1 {
    list-style: none;
    padding: 10px;
    background: #e5e5e5;
    margin: 0px;
    border-bottom: solid 1px #c5c5c5;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, .5);
    font-weight: bold;
}
#mainNav1 li {
    display: inline-block;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
}
#mainNav1 li:hover, .active {
    background: #c5c5c5;
}
.formContainer {
    padding: 10px 10px;
    border: solid 1px #c5c5c5;
    margin: 20px;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, .5);
    display: none;
    position: relative;
}
.formContainer h1 {
    margin: 0px;
    background: #e5e5e5;
    padding: 5px 10px;
    border: solid 1px #c5c5c5;
}
.formContainer label {
    display: inline-block;
    min-width: 250px;
}
.formContainer p {
    border-bottom: solid 1px #c5c5c5;
    padding: 5px 0px;
    margin-top: 0px;
}

JavaScript

var forms = [
    {
        "id": 0,
        "name": "Inbound Submissions",
        "description":'This form is used to enter customers into EDDI.',
        "elements": [
            {
                "inputType": "text",
                "inputName": "Customer_Name",
                "label":"Customer Name:"
            },
            {
                "inputType": "text",
                "inputName": "Customer_Number",
                "label":"Customer Number:"
            },
            {
                "inputType": "checkbox",
                "inputName": "Outbound_Call",
                "label":"Contact customer via outbound call:"
            },
            {
                "inputType": "radio",
                "inputName": "Weekend_Available",
                "label":"Some random question:",
                "options": [ 
                    {
                        "text":"Yes",
                        "value":"yes"
                    },{
                        "text":"No",
                        "value":"no"
                    }
                ]
            },
            {
                "inputType": "submit",
                "inputName": "submit"
            }
        ]
    },
    {
        "id": "1",
        "name": "Initial Interview",
        "description":"This form is used gather information about the customer's business.",
        "elements": [
            {
                "inputType": "text",
                "inputName": "Business_Name",
                "label":"What is the business's name?"
            },
            {
                "inputType": "text",
                "inputName": "Business_Hours",
                "label":"What are the business's hours of operation?"
            },
            {
                "inputType": "radio",
                "inputName": "Weekend_Available",
                "label":"Customer is available on the weekends:",
                "options": [ 
                    {
                       ...