laravel - 3 ajax modal forms on one page not working

Question

I want to have on one page 3 modal forms to allow user to send email to admin using ajax.

First of all I tested it without ajax. I have 3 buttons. Every button opens one form in modal window using alpinejs. After click on submit button POST request is sent to route specified in form. Then email is sent. And then current page is reloaded. So user stays on the same page, but he still see that page is reloaded. Code in controller responsible for POST route is like that

  public function callback(CallbackRequest $request) {
        Mail::to( config('mail.to.address') )->send(new Callback());
        return back()->with([
      'status'      => 'success',
      'messageHeader'   => 'Your question sent!', 
      'messageContent'  => 'We will contact you soon'
          ]);
  }

Without ajax all 3 modal forms work perfectly.

Then I want to introduce ajax and I have many problems:

1. X button in top right corner of modal window is not working => code @click="callback = false". Though code @click.away="callback = false" is working when you click outside modal window.
2. Cancel button is not working as expected. I have @click="callback = false" on this button, but it doesn't try to close modal. Instead it tries to submit form.
3. When I submit callback form first I see Form sucessfully submitted! in the modal window, then I receive email message and in Chrome Devtools Network tab I see code 200 in General section and in Response section I see status: success, messageHeader:..., messageContent:... But when I submit zamer or eskiz form I still see Form sucessfully submitted! in the modal window, but I don't receive email message and in Chrome Devtools Network tab I see code 302 in General section and nothing in Response section.

Link to code is https://codepen.io/schel4ok/full/wvowMxK

Code in controller like that

  public function callback(CallbackRequest $request) {

        Mail::to( config('mail.to.address') )->send(new Callback());
        return response()->json([
      'status'      => 'success',
      'messageHeader'   => 'Your question sent!', 
      'messageContent'  => 'We will contact you soon'
          ]);
  }

question from:https://stackoverflow.com/questions/65927540/3-ajax-modal-forms-on-one-page-not-working

Answer 1

Waitting for answers