Hi Suraj,

Greetings to you!

By looking at your VF code, I think you are looking to create records with Add or Delete Row(s) functionality in a lightning component. Below is the sample code to Create Multiple Contacts, With Add/Delete Rows Dynamically. Kindly modify the code as per your requirement.

Application:

<aura:application extends="force:slds">
   <c:AddOrDeleteRow />
</aura:application>

Component:

<aura:component controller="AddOrDeleteRowC"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <!--Init handler which is call doInit js function on component Load-->  
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <!--Aura Attribute for store Contact Object List as Array-->    
    <aura:attribute name="contactList" type="Contact[]"/> 
    
    <!--Header Part-->        
    <div class="slds-page-header">
        <h1 class="slds-page-header__title">Create Multiple Contacts, With Add/Delete Rows Dynamically</h1>
    </div>
    
    <!--Table Part-->           
    <table class="slds-table slds-table_bordered slds-table_cell-buffer"> 
        <thead>
            <tr class="slds-text-title_caps">
                <th scope="col">
                    <div class="slds-truncate">S.No</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate" title="First Name">First Name</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate" title="Last Name">Last Name</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate" title="Phone">Phone</div>
                </th>
            </tr>
        </thead>   
        
        <tbody>    
            <aura:iteration items="{!v.contactList}" var="ContactInstance" indexVar="rowIndex">
                <tr class="slds-text-title_caps">
                    <td> 
                        {!rowIndex + 1}
                    </td>
                    <td>
                        <ui:inputText class="slds-input" value="{!ContactInstance.FirstName}"/>
                    </td>
                    <td>
                        <ui:inputText class="slds-input" value="{!ContactInstance.LastName}"/>
                    </td>
                    <td>
                        <ui:inputPhone class="slds-input" value="{!ContactInstance.Phone}"/>
                    </td>
                    <td>
                        <aura:if isTrue="{!rowIndex == 0}">
                            <!--<aura:if isTrue="{!lessthanorequal(v.contactList.length,10)}">-->
                                <a onclick="{!c.addNewRow}">
                                    <lightning:icon iconName="utility:add" class="slds-icon slds-icon_small" size="small" alternativeText="add"/>
                                    <span class="slds-assistive-text">Add Icon</span>
                                </a>
                                <aura:set attribute="else">
                                    <lightning:buttonIcon size='large' iconName="utility:add" variant="bare"  alternativeText="Add" disabled='true'  />  
                                </aura:set>
                            <!--</aura:if>   -->
                            
                            <aura:set attribute="else">
                                <a onclick="{!c.removeDeletedRow}" data-value="{!rowIndex}">
                                    <lightning:icon variant="error" iconName="utility:delete" class="slds-icon slds-icon_small" size="small" alternativeText="icon"/>
                                    <span class="slds-assistive-text">Delete Icon</span>
                                </a>
                            </aura:set> 
                        </aura:if>
                    </td> 
                </tr>
                
                
            </aura:iteration>
        </tbody>
    </table>
    <br/>
    
    <!--Save Button which is call Save js function on click --> 
    <lightning:button label="Save" 
                      variant="brand" 
                      iconName="utility:save"
                      iconPosition="left"
                      onclick="{!c.Save}"/>
    
</aura:component>

Controller:

({    
    // function call on component Load
    doInit: function(component, event, helper) {
        // create a Default RowItem [Contact Instance] on first time Component Load
        // by call this helper function  
        helper.createObjectData(component, event);
    },
    
    // function for save the Records 
    Save: function(component, event, helper) {
        // first call the helper function in if block which will return true or false.
        // this helper function check the "first Name" will not be blank on each row.
        if (helper.validateRequired(component, event)) {
            // call the apex class method for save the Contact List
            // with pass the contact List attribute to method param.  
            var action = component.get("c.saveContacts");
            action.setParams({
                "ListContact": component.get("v.contactList")
            });
            // set call back 
            action.setCallback(this, function(response) {
                var state = response.getState();
                if (state === "SUCCESS") {
                    // if response if success then reset/blank the 'contactList' Attribute 
                    // and call the common helper method for create a default Object Data to Contact List 
                    component.set("v.contactList", []);
                    helper.createObjectData(component, event);
                    alert('Record Saved Successfully');
                }
            });
            // enqueue the server side action  
            $A.enqueueAction(action);
        }
    },
    
    // function for create new object Row in Contact List 
    addNewRow: function(component, event, helper) {
        // call the comman "createObjectData" helper method for add new Object Row to List  
        helper.createObjectData(component, event);
    },
    
    // function for delete the row 
    removeDeletedRow: function(component, event, helper) {
        // get the selected row Index for delete, from Lightning Event Attribute  
        
        var ctarget = event.currentTarget;
        var index = ctarget.dataset.value;
        // get the all List (contactList attribute) and remove the Object Element Using splice method    
        var AllRowsList = component.get("v.contactList");
        AllRowsList.splice(index, 1);
        // set the contactList after remove selected row element  
        component.set("v.contactList", AllRowsList);
    },
})

Helper:

({
    createObjectData: function(component, event) {
        // get the contactList from component and add(push) New Object to List  
        var RowItemList = component.get("v.contactList");
        RowItemList.push({
            'sobjectType': 'Contact',
            'FirstName': '',
            'LastName': '',
            'Phone': ''
        });
        
        // set the updated list to attribute (contactList) again            
        component.set("v.contactList", []);      
        component.set("v.contactList", RowItemList);
    },
    
    // helper function for check if first Name is not null/blank on save  
    validateRequired: function(component, event) {
        var isValid = true;
        var allContactRows = component.get("v.contactList");
        for (var indexVar = 0; indexVar < allContactRows.length; indexVar++) {
            if (allContactRows[indexVar].FirstName == '') {
                isValid = false;
                alert('First Name Can\'t be Blank on Row Number ' + (indexVar + 1));
            }
        }
        return isValid;
    },
})

Apex:

public with sharing class AddOrDeleteRowC {
    
    @AuraEnabled
    public static void saveContacts(List<Contact> ListContact){
        Insert ListContact;
    }
}

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas