Как увеличить и уменьшить масштаб изображения, загружать только активные изображения с помощью JavaScript

Question

Я использую JavaScript для разработки веб-приложения, в котором есть кнопки «Увеличить» и «Уменьшить», а также результаты загрузки кнопок для сохранения изображения в локальном пространстве на основе идентификатора.Попробовал ниже код для загрузки, кнопки Zoom.

Функция масштабирования работает не для каждого активного изображения, а также, когда я нажимаю «Загрузить», она открывается в новой вкладке, а не «СОХРАНИТЬ».Но, Zoom In & Zoom Out, загрузка должна работать только на основе идентификатора с использованием JavaScript.

Zoom Script Code

<script type="text/javascript">
            function zoomin(){
                var myImg = document.getElementById("map");
                var currWidth = myImg.clientWidth;
                if(currWidth == 2500) return false;
                 else{
                    myImg.style.width = (currWidth + 100) + "px";
                } 
            }
            function zoomout(){
                var myImg = document.getElementById("map");
                var currWidth = myImg.clientWidth;
                if(currWidth == 100) return false;
                 else{
                    myImg.style.width = (currWidth - 100) + "px";
                }
            }
        </script>

HTML Code

<div class="Top">
                                                <div class="One">
                                                        <button class="prev reverse"> <i class="fas fa-cut"></i> Clip </button>
                                                        <button> <a href="AddH.png" download="Iamges.png" target="_blank"> <i class="fas fa-download"></i> Download </a> </button>
                                                        <span class="Select-Text">Select Page :</span>
                                                        <button class="jump reverse" data-index="0">1</button>
                                                        <button class="jump" data-index="1"> 2</button>
                                                        <button class="jump" data-index="2"> 3</button>
                                                        <span id="Zoom">
                                                            <strong>Zoom Paper :</strong>
                                                            <button type="button" onclick="zoomin()"> <i class="fas fa-search-plus"></i> </button>                                                          <button type="button" onclick="zoomout()"> <i class="fas fa-search-minus"></i> </button>                                                        </span>                                             </div>                                      <div class="Two">                                                   <div class="box" id="box1">                                                     <div class="side side1 main">                                                           <!-- <input type="checkbox" id="zoomCheck">  -->                                                                <img id="map" src="images/AddV.png" class="Middle-Show-Image" />                                                        </div>                                                      <div class="side side2">                                                                <img id="map" src="images/AddH.png" class="Middle-Show-Image" />                                                </div>
<div class="side side3">                                                            <img id="map" src="images/AddV.png" class="Middle-Show-Image" /> 
                                                        </div>                                              </div>                                          </div>                                      </div>

Slider Script Code

<script>
            // Horizontal
            $('#box1').flipbox({
                vertical: false
            });


            // Clock
            $('.clock .box').flipbox({
                vertical: true
            });
            // Buttons
            $('button.prev').click(function() {
                $(this).closest('.item').find('.box').flipbox('prev', $(this).hasClass('reverse'));
            });
            $('button.next').click(function() {
                $(this).closest('.item').find('.box').flipbox('next', $(this).hasClass('reverse'));
            });
            $('button.jump').click(function() {
                $(this).closest('.item').find('.box').flipbox('jump', $(this).data('index'), $(this).hasClass('reverse'));
            });
            $('button.config').click(function() {
                $(this).closest('.item').find('.box')
                    .flipbox({
                        animationDuration: $(this).data('duration'),
                        animationEasing: $(this).data('easing')
                    })
                    .flipbox('next');
            });
        </script>