modal not letting user choose an option - php

Question

I am trying to have a pop up modal for confirmation if the user wants to delete a certain item. However, when user clicks delete the modal pops up for a split second and directly deletes the item. The button is the hyperlink form.
Code for the delete button:
<a onclick="confirmDelete(this);" href="add_equipment_process.php?delete=<?php echo $data['id']; ?>" class="btn btn-danger" data-id="<?php echo $data['id'];?>" > Delete
Code for delete process:
if (isset($_GET['delete'])) {
$id = $_GET['delete'];
$mysqli->query("DELETE FROM equipment WHERE id=$id") or die($mysqli->error);
$_SESSION['message'] = "Equipment has been deleted successfully.";
$_SESSION['message_type'] = "success";
header("Location: add_equipment.php");
}
Delete function
function confirmDelete(self) {
var id = self.getAttribute("data-id");
document.getElementById("deletedata").id.value = id;
$("#myModal").modal("show");
Code for the confirmation modal:
<div id="myModal" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Delete User</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this equipement ?</p>
<form method="POST" action="add_equipment.php" id="deletedata">
<input type="hidden" name="id">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" id="deletedata" name="delete" form="deletedata" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
The add_equipment.php is the file which has the delete button, add_equipment_process.php is the file that has the deletion process.
I have also tried another way with button for which all the code above is same just the button code is like this:
<button type="button" class="btn btn-danger" data-id="<?php echo $data['id']; ?>" onclick="confirmDelete(this);" href="add_equipment_process.php?delete=<?php echo $data['id']; ?>">
Delete
</button>
The problem with the button is that it shows the modal but when I click on the delete button it doesn't do anything. :( Please tell me what I am doing wrong. I want my code to ask user for confirmation for deleting certain item before deleting.
I have seen several solutions for this on here, but most of them were just to add scripts. And I already have the necessary scripts in my head tag.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Answer 1

I made changes to the modal and put the buttons inside form tag
<div class="modal-body">
<p>Are you sure you want to delete this equipement?</p>
<form method="POST" action="add_equipment.php" id="deletedata">
<input type="hidden" name="id">
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" class="btn btn-success">Close </button>
<button type="submit" id="deletedata" name="delete" form="deletedata" class="btn btn-danger">Delete </button>
</div>
For delete process I used prepared statements, to avoid sql injection problem.
if (isset($_POST['delete'])) {
$stmt = $mysqli->prepare('DELETE FROM equipment WHERE id= ?');
$stmt->bind_param("i", $_POST['id']);
$stmt->execute();
$_SESSION['message'] = "Equipment has been deleted successfully.";
$_SESSION['message_type'] = "success";
$stmt->close();
}
Then it worked.