How to reset a form using Reset button using Extension

Description: reset form is clear all filled details of the form and make the form as new.

Template:

<div class="profile-update-password-form-area">
		<form class="profile-update-password-form" id="profile-update-password-form">
			<fieldset>
				<small class="profile-update-password-form-label">{{translate 'Required'}} <span class="profile-update-password-form-group-label-required">*</span></small>

				<div class="profile-update-password-form-group" data-input="current_password" data-validation="control-group">
					<label class="profile-update-password-form-group-label" for="current_password">{{translate 'Current Password'}} <span class="profile-update-password-form-group-label-required">*</span></label>
					<div  class="profile-update-password-group-form-controls" data-validation="control">
						<input type="password" class="profile-update-password-form-group-input" id="current_password" name="current_password" value="">
					</div>
				</div>

				<div class="profile-update-password-form-group" data-input="password" data-validation="control-group">
					<label class="profile-update-password-form-group-label" for="password">{{translate 'New Password'}} <span class="profile-update-password-form-group-label-required">*</span></label>
					<div  class="profile-update-password-group-form-controls" data-validation="control">
						<input type="password" class="profile-update-password-form-group-input" id="password" name="password" value="">
					</div>
				</div>

				<div class="profile-update-password-form-group" data-input="confirm_password" data-validation="control-group">
					<label class="profile-update-password-form-group-label" for="confirm_password">{{translate 'Confirm Password'}} <span class="profile-update-password-form-group-label-required">*</span></label>
					<div  class="profile-update-password-group-form-controls" data-validation="control">
						<input type="password" class="profile-update-password-form-group-input" id="confirm_password" name="confirm_password" value="">
					</div>
				</div>
			</fieldset>
			<div class="profile-update-password-form-actions">
				<button type="submit" class="profile-update-password-form-actions-update">{{translate 'Update'}}</button>
				<button type="reset" class="profile-update-password-form-actions-reset hide" data-action="reset">{{translate 'Reset'}}</button>
			</div>
		</form>
	</div>

SASS

.profile-update-password {
    background-color: white;
    border-radius: 10px;
}
.profile-update-password-form-title {
    font-family: 'Poppins';
    margin-bottom: 8px;
}
#current_password,#current_password:focus,
#password, #password:focus, 
#confirm_password, #confirm_password:focus{
    border: 1px solid #DCDCDC;
    border-radius: 10px;
    outline: none;
}
.profile-update-password-form-actions-update, 
.profile-update-password-form-actions-update:hover{
    background-color: #000;
    border-color: #000;
}
.profile-update-password-form-actions-reset,
.profile-update-password-form-actions-reset:hover,
.profile-update-password-form-actions-reset:active ,
.profile-update-password-form-actions-reset:focus {
    background-color: #F1A739;
    color: white;
    border-color: #F1A739;
}

Javascript

Entrypoint

_.extend(ProfileUpdatePasswordView.prototype, {

                events: {

                    'click [data-action="reset"]': 'resetForm'

                },

                resetForm: function(event) {

                    this.model.unset('current_password');

                    this.model.unset('password');

                    this.model.unset('confirm_password');

                    event && event.preventDefault();

                    
                    $('#updatePassword').trigger("reset");//used to reset form.

                }

       

            })

screenshot: