Dynamically image not loaded in plugin

Need help Plugins
1

Hello,

I am going to create image slide show plugin for my portal. In that I will get image(s), image description details from the database. For that I have created below fields in my plugin.

Screenshot 2022-04-22 at 12.07.27 PM
Screenshot 2022-04-22 at 12.07.27 PM2250×772 137 KB

Then after I have added required CSS and Jquery file.

In function initialize I have written desired HTML code with some static images and text and added to canvas and adding on test application page. It is displaying correctly.

But when I tried to replace static image with dynamic image URL from update function it is displaying only first image and not updating other images and text.

function(instance, properties, context) {


    
    
   var imgNamearr=['first_image','sec_image','third_image'];
   var imgDescarr=['descr_1','descr_2','descr_3'];
   var imgHeadarr=['head_1','head_2','head_3'];
    
    console.log("HK plugin update");
  
   
	console.log("Log :"+ properties.imagelist.length());
    var imageList = properties.imagelist;  
    var headingList= properties.headinglist;
    var descList =properties.descriptionlist;
    
    var listCounter = imageList.length();
    var imageLink, desc, heading;
    
    imageLink=imageList.get(0,imageList.length())
   // desc=descList.get(0,descList.length())
   // heading=headingList.get(0,headingList.length())
    
    instance.data.imageLink=imageLink;
  //  instance.data.desc= desc;
  //  instance.data.heading= heading;
    instance.data.imageList=imageList;
    
    $('#sec_image').attr('src', imageLink[1]);
     $('#first_image').attr('src', imageLink[0]);
    
    $('#third_image').attr('src', imageLink[2]);
    
    for(nD=0;nD<4;nD++){
                    
      
    //      $('#'+imgNamearr[nD]).removeAttr('src');            
      //  $('#'+imgNamearr[nD]).attr('src', imageLink[nD]); 
      //  $('#'+imgDescarr[nD]).html(desc[nD]);
      //  $('#'+imgHeadarr[nD]).html(heading[nD]);
           
       
    }
    
   
	
   // imageList.get(0,imageList.length())
	console.log("Length :"+ imageList.get(0,imageList.length()));
    
   
    
}

So, Can you please guide me how to achieve this?
Thanks

2

Can you please me