JS Image Grid with php form

Issues with php form post some image Grid using JS.

I have Image Grid using js for some images that were added from the admin panel using PHP (form) the image grid is not working with the PHP (form) I think I added the grid class (class=”work_content_area”) in the wrong places, it should out of the form not in the form but I don’t know how to add it correct.

<section id="portfolio" class="gray_bg section_padding">
    <div class="container">
        <div class="col-md-12 col-sm-12-col-xs-12">
            <div class="section_heading text-center">
                <h1 class="port-title">OUR <span>PORTFOLIO</span></h1>
            </div>
        </div>
        <div class="row">
            <div class="work_filter text-left">
                <ul>
                    <li class="active" data-filter="*">All</li>
                    <li data-filter=".Media">Media</li>
                    <li data-filter=".Interior-Design">Interior Design</li>
                </ul>
            </div>
            <?php
            $select_products = $conn->prepare("SELECT * FROM `products`");
            $select_products->execute();
            if ($select_products->rowCount() > 0) {
                while ($fetch_product = $select_products->fetch(PDO::FETCH_ASSOC)) {
                    ?>
            <form action="" method="post" class="work_content_area">
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class=" thumbnail img-scale-in" data-hover-easing="easeInOut" data-hover-speed="700"
                        data-hover-bkg-color="#ffffff" data-hover-bkg-opacity="0.9">
                        <input type="hidden" name="pid" value="<?= $fetch_product['id']; ?>">
                        <input type="hidden" name="name" value="<?= $fetch_product['name']; ?>">
                        <input type="hidden" name="price" value="<?= $fetch_product['price']; ?>">
                        <input type="hidden" name="image" value="<?= $fetch_product['image_01']; ?>">
                        <!-- <a href="quick_view.php?pid=<?= $fetch_product['id']; ?>"
                                                class="fas fa-eye"></a> -->
                        <img src="uploaded_img/<?= $fetch_product['image_01']; ?>" alt="">
                    </div>
                </div>
            </form>
            <?php
                }
            } else {
                echo '<p class="empty">no products found!</p>';
            }
            ?>
        </div>
    </div>
</section>

JS*

    /* START ISOTOP JS */
    var $grid = $('.work_content_area').isotope({
        // options
    });
    // filter items on button click
    $('.work_filter').on('click', 'li', function () {
        var filterValue = $(this).attr('data-filter');
        $grid.isotope({ filter: filterValue });
    });
    // filter items on button click
    $('.work_filter').on('click', 'li', function () {
        $(this).addClass('active').siblings().removeClass('active')
    });
    /* END ISOTOP JS */