asdfshort.js

function range_include(a,b){
    let arr = [];
    for(; a <= b; a++){
        arr.push(a);
    }
    return arr;
}

//array of the object
let Arrayobject = range_include(1,10).map((i)=>{
    return {
        section:"",
        marks:10
    };
});
Arrayobject[0].section = "Dynamic Table";
Arrayobject[1].section = "Intellij Usage";
Arrayobject[2].section = "Calender Control";
Arrayobject[3].section = "Active Form";
Arrayobject[4].section = "Object  Database";

function generateFormData(index, section, marks, textarea_style, select_content){
    return `<div>
        <span><input type="text" placeholder="Enter Section" name="section${index}" value="${section}"/></span>
        <span id="val2" class="vclass2" style="color:blue;"> ${marks} </span>
        <span id="val3" class="vclass3" >
            <textarea rows="5" cols="40" placeholder="Enter Comments" name="Comment${index}" style="${textarea_style}"></textarea>
        </span>
        <span id="val4" class="vclass4">
            <select type="number" value="" name="marks${index} ">
                ${select_content}
            </select>
        </span>
    </div>`;
}

function genform(obj,i,margin,length){
    return generateFormData(
        i+1,obj.section,obj.marks,`margin-left: ${margin}px;`,
        range_include(0,length).map(i=>`<option>${i}</option>`).join("\n")
    );
}

//generate the form with jquery
$(document).ready(function(){
    for(let i=0;i<Arrayobject.length;i++){
        let obj = Arrayobject[i];
    	//formating data
    	let formdata="";
    	//for the intellij and Active Form Usage
        if(["Intellij Usage","Active Form"].indexOf(obj.section) || obj.marks==10){
            formdata=genform(obj,i,-4,10);
        }else if(obj.marks==30){
            formdata=genform(obj,i,0,30);
        }else{
            formdata=genform(obj,i,0,10);
        }
        $('form').append(formdata);
    }
    //submit and clear
    $('form').append(`<div>
        <input type="submit" value="Send" name="Submit" />
        <input type="reset" value="Clear" name="Reset" />
    </div>`);
});
$("#form input").each(()=>{
    data[theFieldName] = theFieldValue;
});