I want to display a message before an activity is deleted from the list.

I have a list of different activities.
There are two buttons for each activity.
When the user presses one of these, the activity is deleted from the list (in fact, it is added to another database table instead).
Now I want this to be clarified with a message before the activity is deleted.
I want to use Bootstrap's alert component (https://getbootstrap.com/docs/4.0/components/alerts/).
But its not working. I have tried to create a javascript that will be activated when the buttons are pressed. But its not working. The activity is deleted, but no message before.

Here is the code:
<button name="doneBucketSV" type="submit" class="btn btn-sm btn-outline-success btn-block rounded-0" style="width: 49%; float: left; margin-top: 0;" id="doneBucketSV" onclick="doneBucketFunction">Avklarad</button>
<div id="doneBucketSvAlert" class="alert alert-dark collapse">
<a id="doneBucketSvAlertLinkClose" href="#" class="close">&times;</a>
Aktiviteten har överförts till din bucketlista, och har markerats som avklarad!
</div>

<script src="https://ajax.googleapsis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#doneBucketSV').click(function () {
$('#doneBucketSvAlert').show('fade');

setTimeout(function () {
$('#doneBucketSvAlert').hide('fade');
}, 2000);
});

$('#doneBucketSvAlertLinkClose').click(function () {
$('#doneBucketSvAlert').hide('fade');
});
});
</script>
<script>
function doneBucketFunction() {
document.getElementById("doneBucketSV").style.display='none';
}
</script>