how create loop with jquery

It is a Google web design code with custom function.
I need to delate moltiple image by mouse. When the user go out the image the first image need to be delate, when the user go again inside the document, he is able to delate the follow image.

My problem is that whe the user go out the document all the image are going to be delay..

  1. I need to select different image by Css ID –> WHR
  2. somethings don’t work. I’m looking for a different solution.
        
      //var MAX = 3;
     var i = 1;
     gwd.image2 = function(e) {
          var i = 1;
          var whr = "#gwd-image_"+ i;
          var whr2 = "#gwd-image_"+ (i+1);
             
            $(document).mousemove(function(e) {
            
             console.log(whr);
              
              $(whr).css({
                left: e.pageX - 150,
                top: e.pageY - 125,
              }, 10);
             
           
              $(whr).css("-webkit-transform", "rotate(" + (e.pageX - 150) / 10 + "deg)");
              
              $(document).mouseout(function(e) {
                $(whr).animate({
                  left: (e.pageX - 150) * 3 + 'px'
                }, "fast", function() {

                  gwd.actions.events.setInlineStyle('gwd-image_1', 'display: none;');
                  i = i+1;
                })
              })
              })
        
        }
    
      <script type="text/javascript" gwd-events="registration">
    // Support code for event handling in Google Web Designer
    // This script block is auto-generated. Please do not edit!
    gwd.actions.events.registerEventHandlers = function(event) {
   
      gwd.actions.events.addHandler('gwd-taparea_image1', 'mousemove', gwd.image2, false);
    };
    gwd.actions.events.deregisterEventHandlers = function(event) {
      gwd.actions.events.removeHandler('gwd-taparea_1', 'mousemove', gwd.auto_Gwd_taparea_1Touchenter, false);
      gwd.actions.events.removeHandler('gwd-taparea_image1', 'mousemove', gwd.image2, false);
    };
    document.addEventListener("DOMContentLoaded", gwd.actions.events.registerEventHandlers);
    document.addEventListener("unload", gwd.actions.events.deregisterEventHandlers);
  </script>
    
    ```

   In Body there are four image that I need to delate with mouse moviment.

    ```
      <body>
      ...


        
            <div class="gwd-page-content gwd-page-size">
              <gwd-image id="gwd-image_3" source="assets/SO-91650-Solferino_Tamaro_01.03-30.03_300X250.jpg" scaling="stretch" class="gwd-image-1s8p"></gwd-image>
              <gwd-image id="gwd-image_2" source="assets/SO-91650-Solferino_Panebianco_01.03-
              <gwd-image id="gwd-image_1" source="assets/SO-91650-Solferino_Sinclair_05.03-05.04_300X250.jpg" scaling="stretch" class="gwd-image-on7n"></gwd-image>
              <gwd-taparea id="gwd-taparea_image1" class="gwd-taparea-odyq" data-gwd-name="tap_image1"></gwd-taparea>
              <gwd-taparea id="gwd-taparea_1" class="gwd-taparea-f0yc" data-gwd-name="first_interaction" data-gwd-tl-hidden=""></gwd-taparea>
            </div>
          ---
       </body>

        ```