asdf.js

//array of the object
let Arrayobject=[
    {
        section:'Dynamic Table',
        marks:10
    },
    {
        section:'Intellij Usage',
        marks:10
    },
    {
        section:'Calender Control',
        marks:10
    },
    {
        section:'Active Form',
        marks:10
    },
    {
        section:'Object  Database',
        marks:10
    },
    {
        section:'',
        marks:10
    },
    {
        section:'',
        marks:10
    },
    {
        section:'',
        marks:10
    },
    {
        section:'',
        marks:10
    },
    {
        section:'',
        marks:10
    }
];

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

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>
    `;
}

//obtain data with jquery
$(document).ready(function(){
    for(let i=0;i<Arrayobject.length;i++){
        let strl =Arrayobject[i].section.length
        let rem=50-strl;
        //let tg = ' '.repeat(rem) + Arrayobject[i].section;
    	let tg = Arrayobject[i].section;
    	//console.log(tg,rem)
    	//formating data
    	let formdata=``;
    	//for the intellij Usage
    	if(Arrayobject[i].section=="Intellij Usage"){
            formdata=generateFormData(
                i+1,Arrayobject[i].section,Arrayobject[i].marks,"margin-left: -4px;",
                range_include(0,10).map(i=>`<option>${i}</option>`).join("\n")
            );
        }
        //for active form
        else if(Arrayobject[i].section=="Active Form"){
            formdata=generateFormData(
                i+1,Arrayobject[i].section,Arrayobject[i].marks,"margin-left: -4px;",
                range_include(0,10).map(i=>`<option>${i}</option>`).join("\n")
            );
        }
        //for marks 20
        else if(Arrayobject[i].marks==10)
        {
            formdata=generateFormData(
                i+1,Arrayobject[i].section,Arrayobject[i].marks,"margin-left: -4px;",
                range_include(0,10).map(i=>`<option>${i}</option>`).join("\n")
            );
        }
        //for marks 100
        else if(Arrayobject[i].marks==100){
            formdata=generateFormData(
                i+1,Arrayobject[i].section,Arrayobject[i].marks,"margin-left: 0px",
                range_include(0,10).map(i=>`<option>${i}</option>`).join("\n")
            );
        }
        //for marks 30
        else if(Arrayobject[i].marks==30){
            formdata=generateFormData(
                i+1,Arrayobject[i].section,Arrayobject[i].marks,"margin-left: 0px",
                range_include(0,30).map(i=>`<option>${i}</option>`).join("\n")
            );
        }
        $('form').append(formdata);
    }
});