To create fields dynamically in jQuery [closed]

I am having special requirement in jQuery. Instead of defining the HTML in jsp file, we have to create it dynamically. Field name, field type, editable, mandatory, etc. will always be dynamic based on the response we get from backend.

DUMMY JSON:

var dynamicVariables = [
        {
            colName : "ADDITIONAL_VARIABLE1",
            labelName: "Label 1",
            colType: "String",
            isEditable: "YES",
            isMandatory: "YES",
            isVisible: "YES",
            isDropDown: "YES",
            isDependent: "NO",
            dependentOn: "NA"
        },
        {
            colName : "ADDITIONAL_VARIABLE2",
            labelName: "Label 2",
            colType: "Date",
            isEditable: "NO",
            isMandatory: "No",
            isVisible: "YES",
            isDropDown: "NO",
            isDependent: "NO",
            dependentOn: "NA"
        }           
    ]

Current JSP Code Snippet:

    <div class=col-sm-6" style="margin-top:34%;">
    <div class="panel-heading" style="text-align: center; background-color: darkgray; color: white; margin-bottom: 0.5%; padding: 1px;" role="tab" id="panelsColapseOpen-headingOne">
        <div class="row panel-title">
        <div class="col-sm-12" style="font-weight: 600; margin-left:-8%">Additional Dynamic Fields</div>
        </div>
        </div>
        <div class ="row" style="margin-bottom: 0.5%">  
           // it's the place for dynamic input fields. I want one row to have 4 input fields maximum. And                   //input fields can be normal text areas, dropdowns, or datepickers.
              // CSS  should be like this:

                    //<div class="col-sm-6" style="width:50%; padding-right:0px;">
                    //<div class="col-sm-6 labelStyle">
                    //<span style="font-size: 10px">Queue : &nbsp;</span>
                    //</div>
                    //<div class="col-sm-6 inputFieldStyle">
                    //<input id="psrQueueName" class="inputBoxStyle" style="padding-left:5px;">
                    //</div>
                    //</div>
        </div>
    </div>

JS File:

We have to map through JSON, and create the dynamic fields based on number of objects it has.

dynamicVariables.map(function(item,i) {
    console.log("item", item);
    
});

I am confused on how to start with this. Can anyone please help me. Thank you in advance.