Multiple ajax form not working on whole site

Question

I have multiple pages which contains multiple ajax forms. When I am working on a particular form, its ajax submission is working. But at that moment, if I go to second page form, ajax submission not working and the page gets reloaded.

But after clearing cache, if I work on second page form, its ajax submission working, but then first page ajax form submission not working.

How will I manage multiple ajax forms on multiple pages?

My ajax submission code looks like this:

$form['actions']['submit'] = array(
  '#type' => 'submit',
  '#value' => $this->t('Submit'),
  '#attributes' => array('class' => array('btn-red')),
  '#ajax' => [
    'callback' => '::submitCallBack',
    'progress' => array(
      'type' => 'throbber',
      'message' => 'Please wait...',
    ),
  ],
);

Answer 1

After a lot of research I found that there is a confliction issue having same name of the submit button for all of the forms. So I changed the submit button name for each forms.

Now the ajax is working fine for all forms.

Form 1 submit button:

$form['form_one_submit'] = [
  '#type' => 'submit',
  '#value' => $this->t('Submit'),
  '#ajax' => [
    'callback' => '::callBackFunctionOne',
    'progress' => array(
      'type' => 'throbber',
      'message' => 'Just a moment...',
    ),
  ],
];

Form 2 submit button:

$form['form_two_submit'] = [
  '#type' => 'submit',
  '#value' => $this->t('Submit'),
  '#ajax' => [
    'callback' => '::callBackFunctionTwo',
    'progress' => array(
      'type' => 'throbber',
      'message' => 'Please wait...',
    ),
  ],
];