Jquery hover enlarge for more than one image with same names prefix like -image1,image2,

Question

i have a jquery each loop binded images with ids like : $("[id^=MokeImage]"). actually i want to hover,to enlarge the images .i think there is some problem in the ids which i am not finding please help me out.

$(document).ready(function () {
        $("[id^=MokeImage]").hover(function () {
            $(this).addClass('transition');

            }, function () {
                $(this).removeClass('transition');
            });
        });
        
        

.transition {
  -webkit-transform: scale(1.6);
  -moz-transform: scale(1.6);
  -o-transform: scale(1.6);
  transform: scale(1.6);
}

img[id^=MokeImage] {
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
}

img[id^=MokeImage] {
  width: 50px;
  margin: 50px;
}

This is the Binding of images using ajax :

 $(document).ready(function () {
     
            $.ajax({
    
                type: "get",
                url: "@Url.Content("~/Sales/GetGangingTransportOrders")",
                data: ({ CustomerId: selectedcutomer }),
    
                datatype: "json",
                traditional: true,
                success: function (data) {
    
                    var json = data.GangingBatchModel;
                    
                    **$.each(json, function (index, obj) {
                        var row =
                               '<tr><td style="width:20mm"><img src="' + 
          obj.ImageUrl + '" id = "MokeImage' + index + '" style="width:100%"/></td></tr>'**  
                              
                    });
    });