How to insert multiple object at a time or insert multiple Question with 4 option at a time in Lightning Component

Hello friend today post , How to insert multiple object or insert multiple question a time in lightning component,
this post ,i take the example of insert multiple question at a time ,,
so friends let us start ...

Note: before condind first Create Two Custom Object
1-Quiz__c-create one custom field, Number-of-Rows__c(number type or text type both are suitable)
2-Question__c- create 6 custom fields.... SN__c(text type),Question__c(long Text type),Ans1__c(text type),Ans2__c(text type),Ans3__c(text type),Ans4__c(text type),

Step=>1. first open your developer console
go to File=>New=>Lightning Component

Question.cmp

<aura:component controller="QuizPostController" implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global" >
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="row" type="Integer[]"/>


<table class="slds-table slds-table_cell-buffer slds-table_bordered" id="quiz">
<thead>
<tr class="slds-line-height_reset">
<th class="" scope="col">
<div class="slds-truncate" title="S.N">S.N</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Question">Question</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Ans1">Ans1</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Ans2">Ans2</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Ans3">Ans3</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Ans4">Ans4</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Contact">Choice of Ans</div>
</th>
</tr>
</thead>

<tbody>


<aura:iteration items="{!v.row}" var="rows" indexVar="indx">
<tr class="slds-hint-parent">

<td class="">

<input type="text" class="sn" name="sn" value="{!rows}" id="{!'sn'+indx}" disabled="true"/>
</td>
<td class="">
<textarea type="textarea" name="quens" id="{!'quens'+indx}" required="true"/>
</td>
<td class="">
<input type="text" name="ans1" id="{!'ans1'+indx}" required="true"/>
<input type="checkbox" class="che" name="t1" value="{!indx}" id="{!'ch1'+indx}" onclick="{!c.first}"/>
</td>
<td class="">
<input type="text" name="ans2" id="{!'ans2'+indx}" required="true"/>
<input type="checkbox" class="che" name="t2" value="{!indx}" id="{!'ch2'+indx}" onclick="{!c.second}"/>
</td>
<td class="">
<input type="text" name="ans3" id="{!'ans3'+indx}" />
<input type="checkbox" class="che" name="t3" value="{!indx}" id="{!'ch3'+indx}" onclick="{!c.third}"/>
</td>
<td class="">
<input type="text" class="ans4" name="ans4" id="{!'ans4'+indx}" />
<input type="checkbox" class="che" name="t4" value="{!indx}" id="{!'ch4'+indx}" onclick="{!c.fourth}"/>
</td>

<td class="">
<select id="{!'opt'+indx}">
<option class="" name="Schoice" value="Single" id="{!'schoice'+indx}">Single Choice</option>
<option class="" name="Mchoice" value="Multiple" id="{!'mchoice'+indx}">Multiple Choice</option>
</select>
</td>

</tr>
</aura:iteration>
</tbody>
</table>
<center>
<div><lightning:button class="btn" aura:id="btn" label="Submit" variant="brand" onclick="{!c.save}"/></div>
</center>
</aura:component>

Step=>2. Question.css

.THIS .mg{
margin-left:10px;
margin-top:10px;
}
.THIS .top{
margin-top:10px;
}
.THIS .sn{
margin-top:10px;
margin-left:10px;
width:70px;
}
.THIS .ans4{
margin-right:10px;
}
.THIS .choice{
margin-left:150px;
}
.THIS .btn{
margin-top:10px;
}
.THIS .che{
margin-left:5px;
}

Step=>3. QuestionController.js

({
doInit:function(component,event,helper){
var action=component.get("c.NumberOfRow");
action.setCallback(this,function(res){
if(res.getState()=="SUCCESS"){
component.set("v.row",res.getReturnValue());
}
});
$A.enqueueAction(action);
},

save : function(component, event, helper) {
helper.saveHelper(component,event);

},
})

Step=>4. QuestionHelper.js

({
saveHelper : function(component,event){
var row=component.get("v.row");
var sn=[];
for(var i=0;i<row.length;i++){
sn[i]=document.getElementById("sn"+i).value;
}
//alert(sn);

var quens=[];
for(var i=0;i<row.length;i++){
quens[i]=document.getElementById("quens"+i).value;
}
//alert(quens);

var ans1=[];
for(var i=0;i<row.length;i++){
ans1[i]=document.getElementById("ans1"+i).value;
}
//alert(ans1);

var ans2=[];
for(var i=0;i<row.length;i++){
ans2[i]=document.getElementById("ans2"+i).value;
}
//alert(ans2);

var ans3=[];
for(var i=0;i<row.length;i++){
ans3[i]=document.getElementById("ans3"+i).value;
}
//alert(ans3);

var ans4=[];
for(var i=0;i<row.length;i++){
ans4[i]=document.getElementById("ans4"+i).value;
}

var action=component.get("c.quizPost");
action.setParams({
"sn":JSON.stringify(sn),
"que":JSON.stringify(quens),
"ans1":JSON.stringify(ans1),
"ans2":JSON.stringify(ans2),
"ans3":JSON.stringify(ans3),
"ans4":JSON.stringify(ans4)
});

action.setCallback(this,function(res){
if(res.getState()=="SUCCESS"){
//JSON.stringify(res.getReturnValue());

}
});
$A.enqueueAction(action);
//window.location.reload();
},

})

Step=>5. Create Apex class
got to File=>New=>Apex Class

QuizPostController.apxc

public class QuizPostController {

@AuraEnabled
public static String quizPost(String[] sn,String[] que,String[] ans1,String[] ans2,
String[] ans3,String[] ans4){
System.debug('direct data from controller'+que);
List<Question__c>lstobj=new List<Question__c>();

for(integer i=0;i<sn.size();i++){
Question__c obj=new Question__c();
obj.SN__c=sn[i];
obj.Question__c=que[i];
obj.Ans1__c=ans1[i];
obj.Ans2__c=ans2[i];
obj.Ans3__c=ans3[i];
obj.Ans4__c=ans4[i];
lstobj.add(obj);
}
insert lstobj;
return 'insertData';
}

@AuraEnabled
public static List<integer>NumberOfRow(){
List<integer>intlist = new List<integer>();
Quiz__c nofr=new Quiz__c();
nofr=[SELECT NoOfRows__c FROM Quiz__c];
System.debug('number of rows'+nofr);
for(integer i=1;i<=nofr.NoOfRows__c;i++){
intlist.add(i);
}
System.debug('list=>'+intlist);
return intlist;
}

}

Output: