Laravel/javascript Modal fail to appear - laravel

Question

is there anything wrong with my id=submit_fw in the blade, the modal did not appear and I already addressed it to the text/javascript below, the button will submit the data in the show.blade and it supposed to have a confirmation message.
show blade
<div class="col-3 col-xs-3 col-sm-3 col-md-1 col-lg-1 col-xl-1 p-0 mt-0"></div>
#if($fw->fw_current_stg == "UR" && $fw->fw_user == $user)
<div class="col-12 col-xs-12 col-sm-12 col-md-5 col-lg-5 col-xl-5 p-0 mt-0 text-right">
<button type="button" class="btn btn-primary btn-block text-white" id="submit_fw">
<span class="spinner-border spinner-border-sm d-none" id="sp_submit" aria-hidden="true"></span>
<i class="fas fa-check" id="icon_submit"></i> SUBMIT REQUEST
</button>
#endif
text/javascript
$('#submit_fw').click(function()
{
$('#sp_submit').removeClass('d-none');
$('#icon_submit').addClass('d-none');
Swal.fire({
title: 'Proceed PR?',
text: 'Are you sure you want to submit this PR to Department Head?',
icon:'question',
confirmButtonText: 'YES',
confirmButtonColor: '#fa0031',
cancelButtonColor: '#fa0031',
showCancelButton:'true',
cancelButtonText:'NO',
}).then((result) => {
if (result.value) {
$.ajax({
url: "{{route('fw.submitfw')}}",
type:"post",
data:{
fw_number:$('#fw_number').val(),
},
success: function(result){
if(result == "submitted")
{
Swal.fire({
title: 'Success',
text: 'Your PR has been submitted to your Department Head',
icon: 'success',
confirmButtonText: 'Return to List',
confirmButtonColor: '#fa0031',
}).then((result) => {
if (result.value) {
let url = "{{route('fw.index')}}";
document.location.href=url;
}
});
}
}
});
}
else
{
}
});
$(this).prop('disabled',true);
});

Answer 1

First of all check id=submit_fw is only one time used in your blade file.
Then you simply set addEventListener to the id.
var submitButton = document.getElementById('submit_fw');
var submitUrl = "{{route('fw.submitfw')}}";
submitButton.addEventListener('click', function (e) {
e.preventDefault();
$('#sp_submit').removeClass('d-none');
$('#icon_submit').addClass('d-none');
submitButton.disabled = true;
Swal.fire({
title: 'Proceed PR?',
text: 'Are you sure you want to submit this PR to Department Head?',
icon:'question',
confirmButtonText: 'YES',
confirmButtonColor: '#fa0031',
cancelButtonColor: '#fa0031',
showCancelButton:'true',
cancelButtonText:'NO',
}).then((result) => {
if (result.value) {
$.ajax({
url: submitUrl,
type:"post",
data:{
fw_number:$('#fw_number').val(),
},
success: function(result){
if(result == "submitted") {
$('#sp_submit').addClass('d-none');
$('#icon_submit').removeClass('d-none');
submitButton.disabled = false;
Swal.fire({
title: 'Success',
text: 'Your PR has been submitted to your Department Head',
icon: 'success',
confirmButtonText: 'Return to List',
confirmButtonColor: '#fa0031',
}).then((result) => {
if (result.value) {
let url = "{{route('fw.index')}}";
document.location.href=url;
}
});
} else {
Swal.fire({
text: 'Somthing went wrong, please try agian!',
icon: "error",
confirmButtonText: "Ok, got it!",
confirmButtonColor: '#fa0031',
});
$('#sp_submit').addClass('d-none');
$('#icon_submit').removeClass('d-none');
submitButton.disabled = false;
}
},
error: function (jqXHR, textStatus, errorThrown) {
$('#sp_submit').addClass('d-none');
$('#icon_submit').removeClass('d-none');
submitButton.disabled = false;
}
});
} else {
$('#sp_submit').addClass('d-none');
$('#icon_submit').removeClass('d-none');
submitButton.disabled = false;
}
});
});