Hello i am developing a project but getting an error i don't know why is this happening and i have tried everything i can.
please help me i am providing code below it requires 3 files to understand it so i am sending them:

index.php

<!-- Main Content-->
            <div class="col-md-8">
                <div class="row">
                    <h2 class="text-center">Featured Products</h2>
                    <?php while($product = mysqli_fetch_assoc($featured)): ?>
                        <div class="col-md-3">
                            <h4><?= $product['title']; ?></h4>
                            <img src="<?= $product['images']; ?>" alt="<?= $product['title']; ?>" class="img-thumbnail"/>
                            <p class="list-price text-danger">List Price: <s>$<?= $product['list_price']; ?></s></p>
                            <p class="price">Our Price: $<?= $product['price']; ?></p>
                            <button type="button" class="btn btn-sm btn-success" onclick = "detailsmodal(<?= $product['id']; ?>)">
                                Details
                            </button>

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

    <?php 

        include 'includes/rightbar.php';
        include 'includes/footer.php';

    ?>

detailsmodal.php:

<?php
    require_once 'Core/init.php';
    $id = $_POST['id'];
    $id = (int)$id;
    $sql = "SELECT * FROM products WHERE id= $id";
    $result = $db->query ($sql);
    $product = mysqli_fetch_assoc($result);
    $brand_id = $product['brand'];
    $sql1 = "SELECT brand FROM brand WHERE id = '$brand_id'";
    $brand_query = $db->query($sql1);
    $brand = mysqli_fetch_assoc($brand_query);
    $sizestring = $product['sizes'];
    $size_array = explode(',', $sizestring);
?>

<!-- Details light box -->
<?php ob_start(); ?>
        <div class="modal fade details-1" id="details-modal" tabindex="-1" role="dialog" aria-lebelledby="details-1" 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"><?= $product['title']; ?></h4>
                    </div>
                    <div class="modal-body">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="center-block">
                                        <img src="<?= $product['images']; ?>" alt="<?= $product['title']; ?>" class="details img-responsive" />
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <h4>Details</h4>
                                    <p><?= $product['description']; ?></p>
                                    <hr />
                                    <p>Price: $39.99</p>
                                    <p>Brand: <?= $brand['brand']; ?></p>
                                    <form action="Add_cart.php" method="post">
                                        <div class="form-group">
                                            <div class="col-xs-3">
                                                <label for="quantity">Quantity:</label>
                                                <input type="text" class="form-control" id="quantity" name="quantity" />
                                            </div>
                                        </div><br /> <br />
                                        <div class="form-group">
                                            <label for="size">Size: </label>
                                            <select name="size" id="size" class="form-control">
                                                <option value="Select">Select</option>
                                                <?php foreach ($size_array as $string) {
                                                    $string_array = explode(':', $string);
                                                    $size = $string_array[0];
                                                    $quantity = $string_array[1];
                                                    echo "<option value='.$size.'>'.$size.' ('.$quantity.' Available)</option>";
                                                } ?>

                                            </select>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default" onclick="closeModal()">Close</button>
                        <button class="btn btn-warning" type="submit"><span class="glyphicon glyphicon-shopping-cart"></span> Add To Cart</button>
                    </div>
                </div>
            </div>
        </div>

        <script>
            function closeModal(){
                jQuery(#details-modal).modal('hide');
                setTimeout (function(){
                    jQuery(#details-modal).remove();
                    jQuery(.modal-backdrop).remove();
                },500)
            }
        </script>
<?php echo ob_get_clean(); ?>

and here's php function where it is defined in
footer.php:

<script>
    function detailsmodal (id) {
              var data {"id" : id};
              jQuery.ajax({
                url : '/Online Store/Includes/detailsmodal.php',
                method : "post",
                data : data,
                success : function(data){
                    jQuery('body').append(data);
                    jQuery('#detail-1').modal('toggle')
                },
                error : function(){
                    alert("Something went worng...");
                }

              });
            }


</script>

please hurry deadline is coming close.
Thank you in advance.

The detailsmodal function is supposed to open a modal when user clicks on details.
I forgot to add that

First thing to check is whether your javascript function is appearing on the page.
Once the page is loaded in the browser, view the source and confirm the footer is loading correctly and that the detailsmodal function is part of the page source.

Are you getting any other errors from the page in the console?

It is appearing perfectly in and console haves another error in function it says unexpected token at this line:

function detailsmodal (id) {
              var data {"id" : id};

which shouldn't be a error

It is an error.
var data {"id": id};
isn't valid javascript.
var data = {"id": id};

commented: Thanks +0

its still not working nothing happen insted in console i get error on this lines

function closeModal(){
                jQuery(#details-modal).modal('hide');

            }

the error says Uncaught SyntaxError: Unexpected token ILLEGAL

Also, you are calling the detailsmodal() script before it is defined up in index.php.

commented: Thanks how can i define it other that including footer.php i can't find a way to do it +0

Have the script defined in it's own page, and include that just once in anything that needs to use it.

Thanks it is no longer showing detailmodal is undefined but still not working and giving error for closeModal function.

function closeModal(){
                jQuery(#details-modal).modal('hide');
                setTimeout (function(){
                    jQuery(#details-modal).remove();
                    jQuery(.modal-backdrop).remove();
                },500)
            }

You need to quote the id in the jquery call
jQuery('#details-modal').modal('hide');
They are strings not variables.

commented: Thanks the code is solved and working fine. +0