Livewire submit form creates duplicate records in database - php

Question

I have a form in modal and I'm using Livewire, what's really happens is when I submit the form everything works correctly but it just creates duplicate records!
The first time creates 2 duplicates, the second time creates 3 and more and more.
I don't know how to fix this!
I'd be appreciated for your help.
this is my livewire view file :
<div class="modal fade" id="createProfessionModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<!--begin::Container-->
<div class="card card-custom card-shadowless rounded-top-0">
<!--begin::Body-->
<div class="card-body p-0">
<div class="row justify-content-center py-8">
<!--begin::Wizard Form-->
<form class="form fv-plugins-bootstrap fv-plugins-framework" id="createProfessionForm" method="post" wire:submit.prevent="store">
<div class="justify-content-center">
<!--begin::Wizard-->
<div class="my-5 step">
<h5 class="text-dark font-weight-bold mb-10">ایحاد حرفه جدید</h5>
<!--begin::Group-->
<div class="form-group row fv-plugins-icon-container">
<label class="col-form-label" for="profession_title">عنوان حرفه</label>
<div class="col-lg-9 col-xl-9">
<input id="profession_title" class="form-control form-control-solid form-control-lg" wire:model.defer="title" name="title" type="text">
<div class="fv-plugins-message-container"></div>
</div>
</div>
<!--end::Group-->
<button type="submit" class="btn btn-primary font-weight-bolder px-9 py-4" >ایجاد</button>
<button type="button" data-dismiss="modal" class="btn btn-outline-info font-weight-bolder px-9 py-4" >بستن</button>
</div>
<!--end::Wizard-->
</div>
</form>
</div>
</div>
</div>
<!--end::Wizard Form-->
</div>
</div>
</div>
script:
document.addEventListener('DOMContentLoaded', function () {
$('#createProfessionForm').on('submit', function (e) {
e.preventDefault();
let professionValue = $('#profession_title').val();
#this.set('title', professionValue, true);
#this.store();
})
})
this is my component
public string $title;
public function store()
{
try {
$profession = new Profession();
$profession->name = $this->title;
$profession->save();
session()->flash('success', 'عملیات با موفقیت انجام شد.');
} catch (\Exception $exception) {
session()->flash('error', __($exception->getMessage()));
}
}

Answer 1

If you are using livewire, you don't need to bind the event in Javascript like you're doing here.
Because if you do that, the request is firing twice. You can check for the same in the network as well.