cannot insert data from Database to Modal PHP

Question

I tried to make a Details-Modal, which gets information from the database "products" when the user clicks on the Details-button. However, there are problems with the code, which I couldn't figure out.

when I run on a localhost server, I get this:

Notice: Undefined index: id in D:\xampp\htdocs\web01\includes\details.php on line 3

Index

    <?php
        include 'includes/connect_database.php';
        $sql ="SELECT * FROM products WHERE category=1";
        $category2 = $db->query($sql);
        ?>

        <?php while ($sanpham =mysqli_fetch_assoc($category2)):?>   
                    <div class="col-md-4 col-sm-6 col-xs-12 single_featured_area">
                        <div class="single_featured wow fadeIn" data-wow-duration=".5s">

                            <?php echo "<img src='../images/menu/".$product['image']."'>";?>


                            <div class="featured_overlay">
                                <div class="overlay_content">
                                    <h3 style="color: white;">  <?= $product['name'];?></h3>
                                    **<button type="button" class="btn-lg" data-toggle="modal" onclick="detailsmodal(<?= $product['id'];?>)">Bestellen</button>**
                                </div>
                            </div>

                        </div>
                    </div>
     <?php endwhile; ?>
<?php 

    include 'includes/details.php';
    include 'includes/footer.php'; ?>

and footer.php :

<?php 
define('BASEURL','/web02/');
?>
    <script>

            function detailsmodal(id){
            var data = {"id":id}; 
            jQuery.ajax({
                url: <?=BASEURL;?>+'menu/includes/details.php',
                method: "post",
                data : data,
                success : function(data){
                    jQuery('body').append(data);
                    jQuery('#detail-pd').modal('toggle');
                },
                error : function(){
                    alert("CAnnot connect");
                }
            });

        }

    </script>   

and details.php :

<?php 
 include 'connect_database.php';
 **$id = $_POST['id'];
 $id = (int)$id;**
 $sql = "SELECT * FROM products WHERE id='$id'";
 $result = $db->query($sql);
 $detailsmd = mysqli_fetch_assoc($result);
?>
<?php ob_start(); ?>
    <div class="modal fade sushi01" id="detail-pd" tabindex="-1" role="dialog" aria-labelledby="detail-pd" aria-hidden="true">
            <div class="modal-dialog modal-lg">

                <div class="modal-content">
                    <div class="modal-header">
                    <button class="close" type="button" onclick="closeModal()" aria-label="close">
                        <span aria-hidden="true" >&times;</span>
                    </button>
                    <h4 class="modal-title text-center"><?= $detailsmd['name'];?></h4>
                </div>
                <div class="modal-body">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="center-block">

                                    <img src="<?= $detailsmd['image'];?>" alt="<?= $detailsmd['name'];?>" class="imgbestellen img-responsive">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <h4>Description</h4>
                                <p><?= $detailsmd['text'];?></p>
                                <hr>

                                <p>Price: <?= $detailsmd['preis'];?></p>
                                    <form action="add-cart.php" method="post">
                                        <div class="form-group">

                                                <label for="quantity">Quantity :</label>

                                                <input type="text" class="form-control" id="quantity" name="quantity">

                                        </div>
                                        <div class="form-group"> 
                                            <label for="size"></label>
                                            <select name="size" id="size" class="form-control">
                                                <option value="12">12</option>
                                                <option value="13">13</option>
                                                <option value="14">14</option>
                                                <option value="15">15</option>
                                            </select>
                                        </div>
                                    </form>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-warning" type="submit"><span class="glyphicon glyphicon-shopping-cart"></span> Bestellen</button>
                    <button class="btn btn-dedault" onclick="closeModal()">Cancle</button>

                </div>
                </div>

            </div>
    </div>
<script>
    function closeModal(){
        jQuery('#detail-pd').modal('hide');
        setTimeout(function(){
            jQuery('#detail-pd').remove();
        },500);
    }

</script>
<?php echo ob_get_clean(); ?>