How to zoom in/zoom out each image in each div with jquery and scale (css)?

Question

I am trying to create a zoom in / zoom out function for images in an article for the website www.nhadatsonnghia.com. When everything worked fine, an error occurred that jquery only works for the first image in the first tag, and the images in each subsequent tag cannot zoom in / zoom out. After running only the first image has class style="transform: scale (1);".

You can see it working here

So how should I fix to zoom in/zoom out each image in each div? I would appreciate it if you suggest me how to fix this!

Thanks very much!

Here is the code

Jquery

$(function() {
    $('.post-header .desc-image-list .full .natural-thumbnail #img').data('scale', '1');
    $('#nav input').on('click', function() {
        var scale  = parseInt($('#img').data('scale')*10,10),
            nScale = $(this).index()===0 ? scale+1 : scale-1;
            nScale = parseFloat(parseInt(nScale,10)/10);
        $('#img').data('scale', nScale).css('transform', 'scale('+nScale+')');
    });
});

HTML

<div class="post-header">
    <div class="desc-image-list">
        <div class="full">
            <div class="natural-thumbnail">
                <img id="img" src="image1.img">  // After running only the first image has class style="transform: scale (1);"
                <div id="nav">
                    <input type="button" value="Zoom in">
                    <input type="button" value="Zoom out">
                </div>
            </div>
            <div class="natural-thumbnail" style="height: 600px;">
                <img id="img" src="image2.img">
                <div id="nav">
                    <input type="button" value="Zoom in">
                    <input type="button" value="Zoom out">
                </div>
            </div>
            <div class="natural-thumbnail" style="height: 0;">
                <img id="img" src="image3.img">
                <div id="nav">
                    <input type="button" value="Zoom in">
                    <input type="button" value="Zoom out">
                </div>
            </div>
        </div>
    </div>
</div>

CSS

#nav {position: sticky; bottom: 20px; left: 50%; margin-left: -50px;}
#nav input {padding: 5px; font-size: 15px; cursor: pointer;}

Answer 1

In addition to @freedomn-m answer.

You can use img tag as a css selector .natural-thumbnail img you don't need any class. update below js and will work fine.

$(function() {
    $('.post-header .desc-image-list .full .natural-thumbnail img').data('scale', '1');
    $('#nav input').on('click', function() {
        var scale  = parseInt($('.natural-thumbnail img').data('scale')*10,10),
            nScale = $(this).index()===0 ? scale+1 : scale-1;
            nScale = parseFloat(parseInt(nScale,10)/10);
        $('#img').data('scale', nScale).css('transform', 'scale('+nScale+')');
    });
});

Answer 2

Id of element should be unique on one html page.

you can use this

$(this).parent().siblings('img').data('scale', nScale).css('transform', 'scale('+nScale+')');