Bootstrap 4.3.1 Modal not wokring - php

Question

I am having difficulties getting this part of my html/php page working, everything else works fine except the modal.
I am using Bootstrap 4.3.1 in the template I am using, i have followed a lot of other post's on SOF but none seem to work. The following code is where it gets called from
<a data-toggle="modal" href="vehicles.php#vehicle_delete_<? echo $row->id;?>" class="btn btn-light"><span class="fa fa-trash"></span></a>
and the modal section;
<? if ($_SESSION['admin_level']>=3) { ?>
<div class="modal fade" id="vehicle_delete_<? echo $row->id;?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><span class="fa fa-pencil"></span> Delete <? echo $row->classname;?></h4>
</div>
<div class="modal-body">
<div class="form-group">
<form method="post" action="vehicles.php#vehicles_delete_<? echo $row->id;?>" role="form">
<input type="hidden" name="type" value="delete" />
<input type="hidden" name="id" value="<? echo $row->id;?>" />
<p>Do you really want to delete the Vehicle "<? echo $row->classname;?>" from the User <? echo $row->name;?>?</p>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-light" data-dismiss="modal" type="reset">Cancel</button>
<button class="btn btn-light" type="submit">Delete Vehicle</button>
</form>
</div>
</div>
</div>
</div>
<? } ?>
I have the same exact code on an version v3.3.5 of Bootstrap and it works quiet fine, but since upgrading to the version I am currently using in this template, it no longer works.
The following is the footer
<!-- Bootstrap core JavaScript-->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<!-- simplebar js -->
<script src="assets/plugins/simplebar/js/simplebar.js"></script>
<!-- sidebar-menu js -->
<script src="assets/js/sidebar-menu.js"></script>
<!-- loader scripts -->
<script src="assets/js/jquery.loading-indicator.js"></script>
<!-- Custom scripts -->
<script src="assets/js/app-script.js"></script>
<!-- Chart js -->
<script src="assets/plugins/Chart.js/Chart.min.js"></script>
<!-- Index js -->
<script src="assets/js/index.js"></script>
The following is the header
<!-- loader-->
<link href="assets/css/pace.min.css" rel="stylesheet"/>
<script src="assets/js/pace.min.js"></script>
<!--favicon-->
<link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
<!-- Vector CSS -->
<link href="assets/plugins/vectormap/jquery-jvectormap-2.0.2.css" rel="stylesheet"/>
<!-- simplebar CSS-->
<link href="assets/plugins/simplebar/css/simplebar.css" rel="stylesheet"/>
<!-- Bootstrap core CSS-->
<link href="assets/css/bootstrap.min.css" rel="stylesheet"/>
<!-- animate CSS-->
<link href="assets/css/animate.css" rel="stylesheet" type="text/css"/>
<!-- Icons CSS-->
<link href="assets/css/icons.css" rel="stylesheet" type="text/css"/>
<!-- Sidebar CSS-->
<link href="assets/css/sidebar-menu.css" rel="stylesheet"/>
<!-- Custom Style-->
<link href="assets/css/app-style.css" rel="stylesheet"/>
Regards.

Answer 1

You shoud add data-target instead of href
from this to
<a data-toggle="modal" href="vehicles.php#vehicle_delete_<? echo $row->id;?>" class="btn btn-light"><span class="fa fa-trash"></span></a>
This
<a data-toggle="modal" href="" class="btn btn-light" data-target="#vehicle_delete_<? echo $row->id;?>"><span class="fa fa-trash"></span></a>
Then after you have to pass the URL to Delete vehicle button

Answer 2

Can you try to add data-target on the buttons?
<a data-toggle="modal" data-target="#vehicle_delete_<? echo $row->id;?>" class="btn btn-light"><span class="fa fa-trash"></span></a>
Could be Bootstrap 3 prevents the default behavior on the href, but Bootstrap 4 doesn't.