getElementById that have existing ids which are created dynamically

I am building a page in ExpressionEngine and each time the user adds a new image, the ID of the img element increments by one (to give each image a unique id). So for example, if admin uploads 3 images ids for each are mainImg0, mainImg1, mainImg2. User can add as many pictures as they need to.

I'm using the following javascript/jquery to allow frontend user to those print images with an input button, but right now the code only prints the first image. What's the best way in js to grab each unique id so that when user clicks print, the respective image opens in new tab and printed?

Here's my current js:

$(document).ready(function(){
    $('#printImg').click(function(){
       pwin = window.open(document.getElementById("mainImg0").src,"_blank");
        pwin.onload = function () {window.print();}
    });
}); 

Here's output of html:

<div class="machine_parts_left">
    <div class="machine_parts_left_img">
        <a class="fancybox-effects-c" href="{image}" title="{image_title}"><img id="mainImg0" src="{image}" alt="{image_title} Diagram" /></a>
        <p>Click To Zoom Image</p>
        <input type="button" value="Print Image" id="printImg" />
    </div>
</div>

<div class="machine_parts_left">
    <div class="machine_parts_left_img">
        <a class="fancybox-effects-c" href="{image}" title="{image_title}"><img id="mainImg1" src="{image}" alt="{image_title} Diagram" /></a>
        <p>Click To Zoom Image</p>
        <input type="button" value="Print Image" id="printImg" />
    </div>
</div>

<div class="machine_parts_left">
    <div class="machine_parts_left_img">
        <a class="fancybox-effects-c" href="{image}" title="{image_title}"><img id="mainImg2" src="{image}" alt="{image_title} Diagram" /></a>
        <p>Click To Zoom Image</p>
        <input type="button" value="Print Image" id="printImg" />
    </div>
</div>

You could simply traverse the DOM:

$('.printImg').click(function(){
    // from the clicked element, find the closest ancestor <div>,
    // search that element for <img> elements, use get() to return the DOM
    // node (not the jQuery collection):
    var img = $(this).closest('div').find('img').get(0),
        pwin = window.open(img.src,"_blank");
    pwin.onload = function () {window.print();}
});

Note the use of .printImg, instead of #printImg; since, as you seem to realise in your question, an id must be unique within the document.

Using a class-selector (.printImg) obviously requires amending the HTML:

<div class="machine_parts_left">
    <div class="machine_parts_left_img">
        <a class="fancybox-effects-c" href="{image}" title="{image_title}"><img id="mainImg0" src="{image}" alt="{image_title} Diagram" /></a>
        <p>Click To Zoom Image</p>
        <input type="button" value="Print Image" class="printImg" />
    </div>
</div>

<!-- other repeated elements removed for brevity -->

References:

• closest().
• find().
• get().