Hi all,

I am new to development have started coding now and learning as per each requirement i am able to take.

I have  a requirement where "Today on all 4 pages within the community we only have a submit button. The new ask is to introduce a "Clear" button that once selected it would clear out any of the fields populated on the page. THIS SHOULD NOT CLEAR THE CUSTOMER NUMBER FIELD "

There is a lightning component with 4 Pages and they all have a submit button. Now the business needs a Clear button to clear all the fields except for the Customer Number field. 

Snippet of the code shown below on Aura Component 
<aura:component implements="forceCommunity:availableForAllPageTypes" access="global" Controller = "EnterTrackingNumberHttpCallOut"> 
    <aura:attribute name="response" type="Map"/>
    <aura:attribute name="returnData" type="Object"/>
    <aura:attribute name="ListOfAttributes" type="String[]"/>
    <aura:attribute name = "trackingNumber" type = "integer"/>
    <aura:attribute name = "CustomerNumber" type = "integer"/>
    <aura:attribute name="showSpinner" type="Boolean" default="true"/>
    
    <!--aura handler with waiting and donewaiting events-->
    <aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
    <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <!--loading spinner start-->
    <aura:if isTrue="{!v.showSpinner == true}">
        <c:Utility_spinner />
    </aura:if>
    <!-- Loading spinner end-->
    <aura:handler event="force:refreshView" action="{!c.isRefreshed}"/>
    <div class="slds-box slds-align_absolute-center">
        <!--Header Part-->
        <div class="slds-media__body">
            <p class="slds-page-header__title slds-truncate" title="Tracking Number Request">Tracking Number Request</p>             
        </div> 
    </div>
    <br/>
    <!--Header part close -->     
     <div style="height:50px; width:200px">          
        <lightning:input type="text" id="CustomerNumber" name = "CustomerNumber" label = "CustomerNumber"  disabled="true" value = "{!v.CustomerNumber}"/>
    </div>
    <br></br>
    <div style="height:50px; width:200px" >          
        <lightning:input type="text" id="trackingNumber" name = "trackingNumber" label ="Tracking Number(USPS, UPS, FedEx..)" required = "true" value = "{!v.trackingNumber}"/>
    </div>    
    <div class="slds-form-element">
         <lightning:button class="customButton" label = "Submit" onclick="{!c.getTrackNumber}" />
{New code to be implemented below I guess}
    </div>
    <br/> 
    <br/> 
    <h3 class="slds-section--title">RESULT : </h3><br />
    <div style="width:400px;height:400px;">
        {!v.response}
    </div>
    
</aura:component>

The code abobe has the submit button created which is highlighted in bold. We have another 3 pages similar to this. If someone can show me on this page i can implement the same for the rest of the 3 pages. 

Any help for this will be appreciated :) 
New to Development still getting there :) 

Thanks !!!