Drupal 8 Custom Form Submit override with Javascript

Question

I have written a custom module in Drupal 8 which has javascript integration with Paymetric. I am handling this form's submission with javascript, however the problem is, it triggers form validation, but never submits the form. On the other hand, when I submit it with form's custom drupal submit button, it goes through fine. I am handling the form submission with javascript in a couple of my other modules without any issues. Can someone please help me find out why this would be happening?

Checked if there is any hidden field which is required and is restricting us to submit the form, also checked for any javascript errors in console, I am killing the cache on form build and construct if that could affect in any way. Have also made sure that form with the right ID is picked up and submitted.

Here is my code:

Custom Module File:
/*
 -- namespace defined and Drupal/Symphony classes used --
*/
class PurchaseCartContact extends FormBase {
  protected $account;
  protected $tempStore;
  protected $messenger;

  public function __construct(
    AccountInterface $account,
    PrivateTempStoreFactory $tempStore,
    MessengerInterface $messenger
  ) {

    \Drupal::service('page_cache_kill_switch')->trigger();

    $this->account      = $account;
    $this->tempStore    = $tempStore->get('org_purchases');
    $this->messenger    = $messenger;
  }

  public static function create(ContainerInterface $container) {
    return new static(
      $container->get('current_user'),
      $container->get('tempstore.private'),
      $container->get('messenger')
    );
  }

  public function getFormId() {
    return 'purchase_cart_contact';
  }

  public function buildForm(array $form, FormStateInterface $form_state) {
    //$form = array();
    $form['#cache']['max-age'] = 0;

    $tempstore                = \Drupal::service('tempstore.private')->get('org_purchases');

 // custom logic and form fields defined

    $form['submit'] = array(
          '#type' => 'submit',
          '#value' => $this->t('Submit'),
          '#attributes' => [
            'class' => ['btn btn-primary payment-submit'],
          ],
          '#prefix' => '<div class="form-item">',
          '#suffix' => '</div>',
        );
    return $form;

  } // buildForm ends here


  public function validateForm(array &$form, FormStateInterface $form_state) {
    ksm("inside validate");
  }

  public function submitForm(array &$form, FormStateInterface $form_state) {
    ksm("inside submit");
  }
}

Twig file:

<div id="action-nav" class="button-group form-item element">
        {# <div class="pull-left"> {{ form.submit }} </div> #} {# works as expected #}
        <div class="btn btn-primary" style="width: 150px;" id="edit-submitpurchasepayment">SUBMIT</div>
    </div>
{{ form.form_token}}
{{ form.form_build_id }}
{{ form.form_id }}

Javascript file:

(function ($, Drupal) {
    Drupal.behaviors.org_purchase = {
        attach: function (context, settings) {
            form = document.getElementById('purchase-cart-contact');
            form.submit();
 }
    };
})(jQuery, Drupal);