PHP; read picture folders, sort them into sets and output them with a loop

how can i do it ever <img> takes the right picture sets

here the picture directory (img):

- example_start.jpg - example-A_small.jpg - example-A_small_2x.jpg - example-A_medium.jpg - example-A_medium_2x.jpg - example-A_large.jpg - example-A_large_2x.jpg - example-AB_small.jpg - example-AB_small_2x.jpg - example-AB_medium.jpg - example-AB_medium_2x.jpg - example-AB_large.jpg - example-AB_large_2x.jpg

// Get Pictures $imgDir = 'img'; $imgs = glob($imgDir.'/{[!_start].jpg}', GLOB_BRACE); // without _start image! asort($imgs);

caption.php file:

$imgCaption = array('example-A is nice','example-B is blue');

require_once 'caption.php'; // picture caption data foreach($imgs as $files => $img){ if(!isset($imgCaption[$files])){$imgCaption[$files] = '';} echo' <img src="'.$_SERVER['REQUEST_URI'].$img.'" srcset=" '.$_SERVER['REQUEST_URI'].$img.' 734w, '.$_SERVER['REQUEST_URI'].$img.' 1472w, '.$_SERVER['REQUEST_URI'].$img.' 1068w, '.$_SERVER['REQUEST_URI'].$img.' 2136w, '.$_SERVER['REQUEST_URI'].$img.' 2016w, '.$_SERVER['REQUEST_URI'].$img.' 4032w," sizes="(min-width: 640px) 50vw, 100vw" width="100%" height="100%" alt="'.$imgCaption[$files].'"> ';

expected Output

<img src="img/example_A-small.jpg" srcset=" img/example-A_small.jpg 734w, img/example-A_small_2x.jpg 1472w, img/example-A_medium.jpg 1068w, img/example-A_medium_2x.jpg 2136w, img/example-A_large.jpg 2016w, img/example-A_large_2x.jpg 4032w," sizes="(min-width: 640px) 50vw, 100vw" width="100%" height="100%" alt="Example A"> <img src="img/example_B-small.jpg" srcset=" img/example-AB_small.jpg 734w, img/example-AB_small_2x.jpg 1472w, img/example-AB_medium.jpg 1068w, img/example-AB_medium_2x.jpg 2136w, img/example-AB_large.jpg 2016w, img/example-AB_large_2x.jpg 4032w," sizes="(min-width: 640px) 50vw, 100vw" width="100%" height="100%" alt="Example A">