Isotope, Wordpress, Visual Composer Problem on Filtering with random sort only the default load

Question

I have this problem

Rendering isotope with all the data filter. Every filter is showing what needs to show. The best part comes now because i want the data filter all to be randomize.

var_dump with the array that is return from admin

0 => 
    array (size=2)
      'dma_mansonry_element_title' => string 'Wedding TTD' (length=11)
      'dma_mansonry_element_images' => string '250,249,248,247,246,245,244,243,242,241,240,239,238,237,236,235,234,233,232,231,230,229,228,227,226,225,224,223,221,222 (length=683)
  1 => 
    array (size=2)
      'dma_mansonry_element_title' => string 'Christening' (length=11)
      'dma_mansonry_element_images' => string '280,281,282,283,284,285,286,287,288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307,308,(length=515)
  2 => 
    array (size=2)
      'dma_mansonry_element_title' => string 'BOUDOIR & NUDE' (length=14)
      'dma_mansonry_element_images' => string '254,255,256,257,258,259,260,261,262,263,264,265,266,267,268,269,270,271,272,273,274,275,276,277,278' (length=99)

php code

            <div class="button-group filter-button-group mb-40">
                <button data-filter="*">show all</button>
<?php 
                foreach($galleries as $gallery) {
                    $title = preg_replace('/[^A-Za-z0-9]/', '', $gallery['dma_mansonry_element_title']);
                    //$title = preg_replace('[\/\&%#\$]', '', $title);
                    echo '<button data-filter="'. '.' . $title . '">'.$gallery['dma_mansonry_element_title'].'</button>';
                }
              ?>
            </div><!-- button-group --> 
            <div class="grid">

                <?php 
                $format = [
                    'grid-item'=>'grid-item',
                    'grid-item grid-item--width2 grid-item--height2' => 'grid-item grid-item--width2 grid-item--height2',
                    'grid-item grid-item--height3'=>'grid-item grid-item--height3',
                    'grid-item grid-item--height2'=>'grid-item grid-item--height2',
                    'grid-item grid-item--width3'=>'grid-item grid-item--width3',
                    'grid-item grid-item--width2 grid-item--height3'=>'grid-item grid-item--width2 grid-item--height3',
                    'grid-item grid-item--width2'=>'grid-item grid-item--width2',
                ];
                ?>
                
                <div class="grid-sizer"></div>
                <?php
                $itemsArray = array();
                foreach($galleries as $gallery) {  
                    $items = explode(',', $gallery['dma_mansonry_element_images']);
                    foreach($items as $item) { 
                        $title = preg_replace('/[^A-Za-z0-9]/', '', $gallery['dma_mansonry_element_title']); 
                        
                        echo '<div class="'. array_rand($format) . ' ' .  $title .'">' . wp_get_attachment_image($item, 'full') .'</div>';
                    }
                }
                ?>
               
            </div><!-- grid -->
        </div>

javascript code

var $grid = jQuery(".grid").isotope({
                itemSelector: ".grid-item",
                percentPosition: true,
                masonry: {
                    columnWidth: ".grid-sizer"
                },

            });

            // filter items on button click
            jQuery('.filter-button-group').on( 'click', 'button', function() {
              var filterValue = jQuery(this).attr('data-filter');
              $grid.isotope({ filter: filterValue });
            });```

I have tried all scenarios, maybe i am missing something or my procedure is not good. I need your profesional adviser. Thanks a lot.