Shorten PHP code with While Loop - php

Question

I'm trying to simplify the code below, but I'm still struggling to understand it. Code A works fine, it outputs a list of images, but Code B just shows a single image
Code A
<?php
$html_form = '<label>
<img src="%1$s" width="%2$s" height="%3$s" alt="%4$s" />
<input type="checkbox" name="%5$s[]" value="%6$s" %7$s/>
</label>';
$html_td = '';
$html = '';
while ($query->have_posts()) {
$query->the_post();
$id = get_the_ID();
$select = '';
$thumb = wp_get_attachment_image_src($id, array(30, 30));
if (is_array($instance['thumbs']) && in_array($id, $instance['thumbs'])) {
$select = 'checked="checked"';
}
$html .= sprintf($html_td);
$html_td = '';
$html_td .= sprintf($html_form, $thumb[0], $thumb[1], $thumb[2], get_the_title(), $this->get_field_name('thumbs'), $id, $select);
}
$html_form = '
<p>
%s
</p>';
printf($html_form, $html);
?>
My Attempt :
Code B
<?php
while ($query->have_posts()) {
$query->the_post();
$id = get_the_ID();
$thumb = wp_get_attachment_image_src($id, array(30, 30));
$thumbs = is_array($instance['thumbs']) ? (bool) in_array($id, $instance['thumbs']) : true;
}
?>
<p>
<label>
<img src="<?php echo $thumb[0] ?>" width="<?php echo $thumb[1] ?>" height="<?php echo $thumb[2] ?>" alt="<?php echo get_the_title() ?>" />
<input class="checkbox" type="checkbox" name="<?php echo $this->get_field_name('thumbs'); ?>" value="<?php echo $id ?>" <?php checked($thumbs); ?>/>
</label>
</p>

Answer 1

As mentioned in the comments it's because you're only echoing out one image.
You could do something like this:
<?php while($query->have_posts()):
$query->the_post();
$id = get_the_id();
$thumb = wp_get_attachment_image_src($id, array(30, 30));
$thumbs = is_array($instance['thumbs']) ? (bool) in_array($id, $instance['thumbs']) : true;?>
<p>
<label>
<img src="<?php echo $thumb[0] ?>" width="<?php echo $thumb[1] ?>" height="<?php echo $thumb[2] ?>" alt="<?php echo get_the_title() ?>" />
<input class="checkbox" type="checkbox" name="<?php echo $this->get_field_name('thumbs'); ?>" value="<?php echo $id ?>" <?php checked($thumbs); ?>/>
</label>
</p>
<?php endwhile;
wp_reset_postdata();
In this case the HTML is inside the while and an image will echo out for each iteration. Also, make sure you have the wp_reset_postdata() or else you may (or may not) encounter bugs in the future.