PHP和javascript的组合带来了一个动态模态

事情是这样的。我有一个数据库，我从一个表回声所有的图像。下面是我的'gallery.php'文件的代码:

<div class="gallery">
    <div class="row">
    <?php
        require('dbparams.php');
        try{
            $pdoObject = new PDO("mysql:host=$dbhost; dbname=$dbname;",$dbuser, $dbpass);
            $sql = "SELECT * FROM pictures";
            $statement = $pdoObject -> prepare($sql);
            $result = $statement -> execute();
            while($record=$statement->fetch()){
                $filename = $record['filename'];
                $mimetype = $record['mimetype'];
                $filedata = $record['filedata'];
                $id=$record['id'];
                echo "<div class='col-sm-5 col-md-3'>";
                    echo "<div class='thumbnail'>";
                        echo "<a id='p' href='#imagemodal'><img id='imageresource' src='data:image/jpeg;base64,".base64_encode($filedata)."' alt='Click'></a>";
                        echo "<div class='caption'>";
                            echo "<h3>Thumbnail label</h3>";
                            echo "<p>...</p>";
                        echo "</div>";
                    echo "</div>";
                echo "</div>";
                }       
            $statement->closeCursor();
            $pdoObject = null;
        }
        catch (PDOException $e) {
            header('Location: index.php?msg=PDO Exception: '.$e->getMessage());
            exit();
        }
        ?></div>
</div>

一切都工作得很好，这里是我的模式(bootstrap)的代码。它是在一个外部PHP文件，我使用要求'imagemodal.php';:

<?php
echo '<div class="modal fade" id="imagemodal" role="dialog">';
echo '<div style="width:85%;" class="modal-dialog">';
    echo '<div class="modal-content">';
        echo '<div class="modal-header">';
            echo '<button type="button" class="close" data-dismiss="modal">&times;</button>';
            echo '<h4 class="modal-title"></h4>';
        echo '</div>';
        echo '<div id="mainmod" class="modal-body">';
        echo '</div>';
        echo '<div class="modal-footer">';
            echo '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>';
        echo '</div>';
    echo '</div>';
echo '</div>';
echo '</div>';
?>

在'gallery.php'文件中，我认为我可以使用javascript-jquery，因此对于通过"a"标签的每次调用，我将创建一个带有特定图像的"img"标签，该图像称为js代码。问题是，虽然它工作得很好，每当我点击一个图像，无论这个图像是什么，它回声从画廊的第一个图像。例如，假设我有10张图片。所有代码都可以正常工作。但是如果我点击第一张图片，第二张图片，第三张图片它总是打开第一张图片的模态。我能做错什么呢?下面是gallery.php文件中的js代码:

<script>
        $("[id='p']").click(function() {
            $("#mainmod").empty();
            $("#mainmod").append("<img id='imagepreview' src=''>")
            $("[id='imagepreview']").attr('src', $("[id='imageresource']").attr('src'));
            $("[id='imagemodal']").modal('show');
        });
    </script>