how to change image from sql database during hover in php

Question

PHP I am trying to change the image during hover. For hover I used jquery, but the problem is that the first image is showing from the SQL database but the image is not changing while I already saved the second image in database

<?php 
include('dbconnect.php');

        $sql = "SELECT * FROM `products` JOIN `images` ON products.product_id=images.product_id";

        $res = mysqli_query($conn, $sql);

        echo "</h3> Total: " . mysqli_num_rows($res) . " Items Found </h3>";
        ?>

        <br><br>
        <div class="container">
        <div class="row">

        <?php
        while ($row = mysqli_fetch_assoc($res))  {
        ?>      
            <div class="col item_col">
                <?php echo $row["img_id"] . "<br>" . $row["product_id"] ."<br>". "<img src ='".$row["image_path1"]."' width=100px height=100px data-src1='".$row['image_path1']."' data-src2='".$row['image_path2']."'>"; ?>
            </div>  
        <?php               
        }
        ?>

        </div>
        </div>

        <?php
        include('dbclose.php');
        ?>

jquery

 <script type="text/javascript">
        $(document).ready(function () {
                 $(".imgs").each(function(i,el){               
                 $(this).mouseenter(function(){
                    $(this).attr("src",$(this).attr("data-src2"))
                 }).mouseleave(function(){
                     $(this).attr("src",$(this).attr("data-src1"))
                 })
            })
        
          });
 
      </script>