Bootstrap 4.3.1 Modal not wokring – PHP Versions

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">&times;</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.