//array of the object
let Arrayobject=[]
obj1={
   
    section:'Dynamic Table',
    marks:20
}
Arrayobject.push(obj1)
obj2={
   
    section:'Intellij Usage',
    marks:10
}
Arrayobject.push(obj2)

obj3={
   
    section:'Calender Control',
    marks:30
}
Arrayobject.push(obj3)

obj4={
   
    section:'Active Form',
    marks:20
}
Arrayobject.push(obj4)

obj5={
   
    section:'Object  Database',
    marks:20
}
Arrayobject.push(obj5)

//obtain data with jquery
$(document).ready(function(){
for(let **0;i<Arrayobject.length;i++)
{
    let strl =Arrayobject[i].section.length
    let rem=50-strl;
    let tg = ' '.repeat(rem) + Arrayobject[i].section;
   //console.log(tg,rem)
   //formating data
   let formdata=``
   //for the intellij Usage
   if(Arrayobject[i].section=="Intellij Usage")
   {

    formdata=`<div>
    <span  style="color:blue;">${tg} </span>
    <span id="val2" class="vclass2" style="color:blue;"> ${Arrayobject[i].marks} </span>
     <span id="val3" class="vclass3" > 
         <textarea rows="5" cols="40" placeholder="Enter Comments" name="Comment${i+1}" style="margin-left: 10px;"></textarea>
    </span>
    
    <span id="val4" class="vclass4">  
  
    <select type="number" value="" name="marks${i+1} ">
        <option>0</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4 </option>
        <option>5</option>
        <option>6</option>
        <option>7 </option>
        <option>8 </option>
        <option> 9</option>
        <option> 10</option>
        
    </select>
  </span>      </div>`
   }
   //for active form
   else if(Arrayobject[i].section=="Active Form")
   {
    formdata=`<div>
    <span  style="color:blue;">${tg} </span>
    <span id="val2" class="vclass2" style="color:blue;"> ${Arrayobject[i].marks} </span>
     <span id="val3" class="vclass3"> 
         <textarea rows="5" cols="40" placeholder="Enter Comments" name="Comment${i+1}" style="margin-left: 20px;"></textarea>
    </span>
    
    <span id="val4" class="vclass4">  
  
    <select type="number" value="" name="marks${i+1}">
        <option>0</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4 </option>
        <option>5</option>
        <option>6</option>
        <option>7 </option>
        <option>8 </option>
        <option> 9</option>
        <option> 10</option>
        <option>11 </option>
        <option>12 </option>
        <option> 13</option>
        <option> 14</option>
        <option> 15</option>
        <option>16 </option>
        <option>17 </option>
        <option>18 </option>
        <option>19 </option>
        <option>20 </option>
    </select>
  </span>      </div>`
   }
   //for marks 20
    else if(Arrayobject[i].marks==20)
     {
    formdata=`<div>
    <span id="val1" class="vclass1" style="margin-right: 1px; color:blue;">${tg} </span>
    <span id="val2" class="vclass2" style="color:blue;"> ${Arrayobject[i].marks} </span>
     <span id="val3" class="vclass3"> 
         <textarea rows="5" cols="40" placeholder="Enter Comments" name="Comment${i+1}" ></textarea>
    </span>
    
    <span id="val4" class="vclass4">  
  
    <select type="number" value="" name="marks${i+1}">
        <option>0</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4 </option>
        <option>5</option>
        <option>6</option>
        <option>7 </option>
        <option>8 </option>
        <option> 9</option>
        <option> 10</option>
        <option>11 </option>
        <option>12 </option>
        <option> 13</option>
        <option> 14</option>
        <option> 15</option>
        <option>16 </option>
        <option>17 </option>
        <option>18 </option>
        <option>19 </option>
        <option>20 </option>
    </select>
  </span>      </div>

  `
     
     }
     //for marks 100
     else if(Arrayobject[i].marks==100)
     {
        formdata=`<div>
        <span id="val1" class="vclass1" style="margin-right: 1px; color:blue;">${tg} </span>
        <span id="val2" class="vclass2" style="color:blue;> ${Arrayobject[i].marks} </span>
         <span id="val3" class="vclass3" > 
             <textarea rows="5" cols="40" placeholder="Enter Comments" name="Comment${i+1}" ></textarea>
        </span>
        
        <span id="val4" class="vclass4">  
      
        <select type="number" value="" name="marks${i+1} ">
            <option>0</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4 </option>
            <option>5</option>
            <option>6</option>
            <option>7 </option>
            <option>8 </option>
            <option> 9</option>
            <option> 10</option>
            
        </select>
      </span>      </div>
      `
     }
     //for marks 30
     else if(Arrayobject[i].marks==30)
     {
        formdata=`<div>
        <span style="color:blue;">${tg} </span>
        <span id="X" class="vclass2" style="color:blue;"> ${Arrayobject[i].marks} </span>
         <span id="val3" class="vclass3"> 
             <textarea rows="5" cols="40" placeholder="Enter Comments" name="Comment${i+1}" style="margin-right: 10px;" ></textarea>
        </span>
        
        <span id="val4" class="vclass4">  
      
        <select type="number" value="" name="marks${i+1}">
            <option>0</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4 </option>
            <option>5</option>
            <option>6</option>
            <option>7 </option>
            <option>8 </option>
            <option> 9</option>
            <option> 10</option>
            <option>11 </option>
            <option>12 </option>
            <option> 13</option>
            <option> 14</option>
            <option> 15</option>
            <option>16 </option>
            <option>17 </option>
            <option>18 </option>
            <option>19 </option>
            <option>20 </option>
            <option > 21<option>
            <option >22 <option>
            <option >23 <option>
            <option > 24<option>
            <option > 25<option>
            <option > 26<option>
            <option >27 <option>
            <option > 28<option>
            <option >29 <option>
            <option >30 <option>

        </select>
      </span>.      </div>
      `
     }
     
    $('form').append(formdata)

  

}

//submit and clear
t=`   <div>                 
<input type="submit"
value="Send" name="Submit" />
<input type="reset"
value="Clear" name="Reset" />
</div>
`
 $('form').append(t)

  });
  $("#form input").each(function () {
    data[theFieldName] = theFieldValue;
});