How to edit the records in Lightning component

Apex class
==========
public class ContactCTRL4
{
   @AuraEnabled
   public static List<Contact> displayConRecords()
   {
       return [select LastName,Email from Contact LIMIT 10];
   }
    @AuraEnabled
    public static list<Contact> updateConRecords(List<Contact> condata)
    {
        try
        {
            update condata;
        }
        catch(Exception e)
        {
            System.debug('unable to update the record due to '+e.getMessage());
        }
        return condata;
    }

}

compoment
=========
<aura:component  controller="ContactCTRL4">
    <aura:attribute name="conlist" type="list"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="isEdit" type="boolean"/>
    <aura:if isTrue="{!!v.isEdit}">
        <lightning:button label="Edit" variant="brand" onclick="{!c.doEdit}"/>
    </aura:if>
    <aura:if isTrue="{!v.isEdit}">
        <lightning:button label="Save" onclick="{!c.doSave}"/>
        <lightning:button label="Cancel" onclick="{!c.doCancel}"/>
    </aura:if>
    <table class="slds-table slds-table_cell-buffer slds-table_bordered">
    <tr>
        <td><b>LastName</b></td>
          <td><b>Email</b></td>
        </tr>
        <aura:if isTrue="{!!v.isEdit}">
            <aura:iteration items="{!v.conlist}" var="Items">
                <tr>
                    <td>{!Items.LastName}</td>
                    <td>{!Items.Email}</td>
   
                </tr>
            </aura:iteration>
        </aura:if>
          <aura:if isTrue="{!v.isEdit}">
            <aura:iteration items="{!v.conlist}" var="Items">
        <tr>
            <td>
                    <lightning:input value="{!Items.LastName}"/>
                </td>
                <td>
                    <lightning:input value="{!Items.Email}"/>
                </td>

            </tr>
        </aura:iteration>
        </aura:if>
    </table>

</aura:component>


controller
==========
({
doInit : function(component, event, helper)
    {
        component.set("v.isEdit",false);
        var action=component.get("c.displayConRecords");
        action.setCallback(this,function(response){
            var state=response.getState();
            var respoval=response.getReturnValue();
            if(state==='SUCCESS')
            {
                console.log('SUCESSS');
                component.set("v.conlist",respoval);
            }
            else
            {
                console.log('Error in fetching the data');
            }
           
        });
        $A.enqueueAction(action);

},
    doEdit:function(component,event,helper)
    {
        component.set("v.isEdit",true);
    },
    doSave:function(component,event,helper)
    {
        component.set("v.isEdit",false);
        var action=component.get("c.updateConRecords");
        action.setParams({
            condata:component.get("v.conlist")
           
        });
          action.setCallback(this,function(response){
            var state=response.getState();
            var respoval=response.getReturnValue();
            if(state==='SUCCESS')
            {
                console.log('SUCESSS');
                component.set("v.conlist",respoval);
            }
            else
            {
                console.log('Error in fetching the data');
            }
           
        });
        $A.enqueueAction(action);
    },
    doCancel:function(component,event,helper)
    {
        component.set("v.isEdit",false);
    }
})