It’s because you’re running the localize script inside the loop. Instead, store the array of ids etc, and then run localize script outside/after you set it up.
All the localize script really does is inject the params you pass into it into the global scope of js/jquery, allowing you to reference them. However, localize script isn’t cumulative, instead you’re just re-writing it over and over (thus only ever seeing the last id of the loop, and all other ids being undefined).
Taking another look, I see another issue:
$array = array(
$bigid[$counter] => $meta['image']
//'bar' => $thumbnail_url
);
Should be
$array[] = array(
$bigid[$counter] => $meta['image']
//'bar' => $thumbnail_url
);
With the difference being that in the former, you are resetting $array over and over, vs the latter being you’re actually pushing the data into an array.
You’ll also want to make sure that prior to the loop, before iteration, to define $array = array(). It will still work, but if you don’t define it first you’ll get php warnings.
As a third option you could also do:
$array[$bigid[$counter]] = $meta['image'];
Since you seem new, I’d actually try doing both and doing a dump/console log to see the difference in data structure it creates.