Magento Knockout issue

PHTML


<?php
namespace Vendor\Brand\Block;
?>


   <script type="text/x-magento-init">
      {
          "*":  {
                  "Magento_Ui/js/core/app": {
                      "components": {
                          "servicesList": {
                              "component": "Vendor_Brand/js/services"
                          }
                      }
                  }
              }
      }
 </script>
                    <div class="ko-wrapper" data-bind="scope: 'servicesList'">
                    <div class="form-inner-wrapper" id="modal-service" >
                        <div class="form-left">
                            <form class="form contact"
                                  action="<?= $block->escapeUrl($block->getFormAction()) ?>"
                                  id="contact-form"
                                  method="post"
                                  data-hasrequired="<?= $block->escapeHtmlAttr(__('* Required Fields')) ?>"
                                  data-mage-init='{"validation":{}}'
                            >
                                <fieldset class="fieldset">
                                    <legend class="legend"><span><?= $block->escapeHtml(__('Write Us')) ?></span></legend><br />
                                    <div class="field note no-label"><?= $block->escapeHtml(__('Make an appointment with Us!')) ?></div>
                                    <div class="field email required">
                                        <div class="control">
                                            <input name="email"
                                                   id="email"
                                                   title="<?= $block->escapeHtmlAttr(__('Email address')) ?>"
                                                   value="<?= $block->escapeHtmlAttr(__('Email')) ?>"
                                                   class="input-text" type="email"
                                                   data-validate="{required:true, 'validate-email':true, 'validate-exclude-magento':true}"
                                                   placeholder="<?= $block->escapeHtmlAttr(__('Email address')) ?>"
                                                   required
                                                   data-bind="value: email"
                                            />
                                        </div>
                                    </div>
                                    <div class="field telephone">
                                        <div class="control">
                                            <input
                                                name="telephone"
                                                id="telephone"
                                                title="<?= $block->escapeHtmlAttr(__('Phone Number')) ?>"
                                                value="<?= $block->escapeHtmlAttr(__('Telephone')) ?>"
                                                data-validate="{required:true, 'validate-phoneStrict':true}"
                                                class="input-text"
                                                type="text"
                                                data-bind="value: telephone"
                                            />
                                        </div>
                                    </div>

                                </fieldset>
                                <div class="actions-wrapper actions-toolbar actions">
                                    <div class="actions__left">
                                        <div class="control">
                                            <input
                                                type="checkbox"
                                                id="terms"
                                                class="checkbox"
                                                name="terms"
                                                required
                                                data-validate="{required:true}">
                                            <label for="terms"><?= $block->escapeHtml(__('Terms & conditions approval.')) ?>
                                                <span>
                                                    <a href="#" class="actions_privacy">
                                                        <?= $block->escapeHtml(__('Privacy & policy')) ?>
                                                    </a>
                                                </span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="actions__right">
                                        <div class="primary">
                                            <input
                                                type="hidden" name="hideit" id="hideit" value="" />
                                            <button
                                                type="submit"
                                                title="<?= $block->escapeHtmlAttr(__('Send Us')) ?>"
                                                id="form-send"
                                                class="action submit primary"
                                                data-bind="click: addService"
                                            >
                                                <span><?= $block->escapeHtml(__('Send Us')) ?></span>
                                            </button>
                                        </div>
                                    </div><!-- actions__left -->
                                </div><!-- actions-wrapper actions-toolbar actions -->
                            </form>
                        </div><!-- form-left -->
                        <div class="form-right" style="object-fit: cover; width: 100%;">
                            <img
                                src="<?php echo $this->getViewFileUrl('images/form-image-right.jpg'); ?>"
                                >
                        </div><!-- form-right -->
                    </div><!-- form-inner-wrapper -->

                        <div class="services" >
                            <p data-bind="visible: EntityRows().length == 0">There is no services</p>
                            <p>You have asked for <span data-bind="text: services().length">&nbsp;</span> gift(s)</p>
                            <ul data-bind="foreach: services" id="todo-list">
                                <li>
                                    <div class="todo-text" data-bind="text: $index() + 1"></div>
                                    <div class="todo-text" data-bind="text: email"></div>
                                    <div class="todo-text" data-bind="text: telephone"></div>
                                    <a href="#" class="todo-destroy" data-bind="click: $parent.removeService">&times;</a>
                                </li>
                            </ul>
                        </div>

                    </div><!-- ko-wrapper -->


                    <script type="text/javascript">
                        require([
                                    "jquery",
                                    "Magento_Ui/js/modal/modal",
                                ],
                                function($, modal) {
                                    var options = {
                                        type: 'popup',
                                        responsive: true,
                                        title: '',
                                        buttons: []
                                    };
                                    var modalService = $('#modal-service');
                                    var popup = modal(options, modalService);
                                    $("#button-add-service").click(function() {
                                        modalService.modal('openModal');
                                    });
                                });
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
</div>



services.js
'use strict';
define([
    'ko',
    'uiComponent',
], function (ko, Component) {
    var self;
    return Component.extend({
        defaults: {
            services: ko.observableArray([]),
        },
         email: ko.observable(),
         telephone: ko.observable(),
        initialize: function(){
            self = this;
            self.addService();
            self.removeService();
            this._super();
            return this;
        },
         addService: function(){
            console.log('add service');
            var servicesArr = {};
              self.servicesArr.push({
                  email: self.email(),
                  telephone: self.telephone()
              });
              self.email('');
              self.telephone('');
          },

         removeService: function(service){
             self.services.remove(service);
         },
    });
});