PHP - Using bootstrap modal as a confirmation to delete multiple selected checkboxes

I have data retrieved from database and populated inside a table. For each rows there is a checkbox where the user will be able to select multiple rows and delete it. How can I make it in such a way that when the user click the delete button after checking the checkbox on the table, a bootstrap modal will appear as a confirmation to delete those selected rows. The user will then click the confirm button on the bootstrap modal to delete the record from the database. Currently when I click the confirm button on the bootstrap modal it does not delete the record on the database.

index.php (PHP)

<?php
include_once 'configuration.php';

session_start();

$message = "";

if((isset($_SESSION['username']) == ""))
{
    header("Location: index.php");
}

$sql = "SELECT id, title FROM books";
$query = mysqli_query($db, $sql);
?>

index.php (HTML)

<div class="content">
            <form id="booksForm" action="" method="POST">
                    <table id="booksTable" class="col-md-12 table-bordered table-striped table-condensed cf">
                        <thead class="cf">
                            <tr>
                                <th><input type="checkbox" class="chkAll" value="" /></th>
                                <th>#</th>
                                <th>Title</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php 
                                while($result = mysqli_fetch_array($query))
                                {
                                    $html = '<tr>
                                                <td data-title="">
                                                    <input type="checkbox" name="chkDelete[]" value="' . $result['id'] . '">
                                                </td>
                                                <td data-title="#">' . $result['id'] . '</td>
                                                <td data-title="Title">' . $result['title'] . '</td>
                                                <td data-title="Action">
                                                    <a href="edit.php?id=' . $result['id'] . '">Edit</a>
                                                </td>
                                             </tr>';

                                    echo $html;
                                }
                            ?>
                        </tbody>
                    </table>

                <input type="button" id="btnDelete" value="Delete" data-toggle="modal" data-target="#confirmDelete"/>
                <div class="message"><?php echo $message;?></div>
            </form>

            <div id="confirmDelete" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            Delete selected data?
                        </div>

                        <div class="modal-body">
                            Click confirm to delete data permanently.
                        </div>

                        <div class="modal-footer">
                            <button class="btn btn-success" id="btnConfirm">Confirm</button>
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                        </div> <!--//END modal-footer-->
                    </div> <!--//END modal-content-->
                </div> <!--//END modal-dialog-->
            </div> <!--//END confirmDelete-->
        </div> <!--//END content-->
<script type="text/javascript" src="resource/js/bootstrap.min.js"></script>
<script>
    $('#btnConfirm').click(function() {
        $.ajax({
            type: "POST",
            url: "deleteBooks.php",
            data: $('confirmDelete').serialize(),
            success: function(msg){
                alert("success");
                $("#confirmDelete").modal('hide'); 
            },
            error: function(){
                alert("failure");
            }
        });
    });
</script>

deleteBooks.php (PHP)

<?php
if(isset($_POST['btnConfirm'])) 
{
    $checkbox = isset($_POST['chkDelete']) ? $_POST['chkDelete'] : array();

    $id = 0;

    for($i=0;$i<count($checkbox);$i++)
    {
        $id = $checkbox[$i];

        $deleteQuery = "DELETE FROM books WHERE id='$id'";
        $DeleteQueryExec = mysqli_query($db, $deleteQuery);
    }
}
?>