Bootstrap Confirmation Delete Modal form not submitted?

It works on Data Listed Type (table). if you click "Hapus" the data will be deleted But, when I put it on this page, the confirmation delete modal is't work. The form isn't submitted and the modal isn't close.. (But if I don't put the confirmation, it works and the data deleted)

Controller:

 public function deleteEvent($eid){
    $event = Event::find($eid);
    $event->delete();
    return redirect()->back()->with('successDelete', "Data Schedule telah dihapus!");
}

Javascript:

$('#confDelEventModal').on('show.bs.modal', function (e) {
    $("#debitur").html($(e.relatedTarget).data('debitur'));
    var form = $(e.relatedTarget).closest('form');
    $(this).find('.modal-footer #confirm').data('form', form);
});
$('#confDelEventModal').find('.modal-footer #confirm').on('click', function(){
    $(this).data('form').submit();
});

Modal:

<div class="modal fade" id="confDelEventModal" role="dialog" 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">Delete Schedule</h4>
            </div>
            <div class="modal-body">
                <p>Hapus Schedule: <b><span id="debitur"></span></b> ?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
                <button type="submit" class="btn btn-danger" id="confirm">Hapus</button>
            </div>
        </div>
    </div>
</div>

Delete form in View:

<form action="" method="POST">
                        
                        
                        <button class="btn btn-danger" type="button" data-toggle="modal" data-target="#confDelEventModal" data-debitur=""><span class="glyphicon glyphicon-trash"></span></button>
                    </form>

via Chebli Mohamed