// Here I use a bootstrap 5 icon (bi-info-circle)
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet" />
// but the built-in fontawesome icons (e.g. fa-info or fa-info-circle) are usable as well.
// In this case you may omit this first css file.
 
<script type="text/javascript" data-author="Tony Partner">
// The original script to add a suffix in an array(text) by Tony Partner
// adapted to add an image and a button to open a new browser window by Joachim Klöfers
 
// Definition of images, caption, and shown web page, only different urls in the first three images.
// Please enter the correct path to the images
   var images = [
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_01.png", 'Romeo&amp;Julia 01', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_02.png", 'Romeo&amp;Julia 02', 'https://www.limesurvey.org/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_03.png", 'Romeo&amp;Julia 03', 'https://www.w3schools.com/js/default.asp'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_04.png", 'Romeo&amp;Julia 04', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_05.png", 'Romeo&amp;Julia 05', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_06.png", 'Romeo&amp;Julia 06', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_07.png", 'Romeo&amp;Julia 07', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_08.png", 'Romeo&amp;Julia 08', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_09.png", 'Romeo&amp;Julia 09', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_10.png", 'Romeo&amp;Julia 10', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_11.png", 'Romeo&amp;Julia 11', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_12.png", 'Romeo&amp;Julia 12', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_13.png", 'Romeo&amp;Julia 13', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_14.png", 'Romeo&amp;Julia 14', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_15.png", 'Romeo&amp;Julia 15', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_16.png", 'Romeo&amp;Julia 16', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_17.png", 'Romeo&amp;Julia 17', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_18.png", 'Romeo&amp;Julia 18', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_19.png", 'Romeo&amp;Julia 19', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_20.png", 'Romeo&amp;Julia 20', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_21.png", 'Romeo&amp;Julia 21', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_22.png", 'Romeo&amp;Julia 22', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_23.png", 'Romeo&amp;Julia 23', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_24.png", 'Romeo&amp;Julia 24', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_25.png", 'Romeo&amp;Julia 25', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_26.png", 'Romeo&amp;Julia 26', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_27.png", 'Romeo&amp;Julia 27', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_28.png", 'Romeo&amp;Julia 28', 'https://getbootstrap.com/'],
        ["", '', ''],
        ["", '', ''],
   ];
// If we display five rows with 6 images (30) there are two not used cells.
// If we display four rows with 7 images everything is fine
 
// A function to load the desired webpage and open the new browser window
   function newWindow(x) {
       myWindow = window.open(images[x][2], "_blank", "menubar=no,titlebar=no, toolbar=no, scrollbars=yes, resizable=yes, top=100, left=500, width=800, height=600");
   };
 
 
   $(document).on('ready pjax:scriptcomplete',function(){
 
// The images, captions, etc. are displayed in a loop
       for (let i=0;i<images.length;i++) {
 
// If there is an image, display it
           if(images[i][0]!='') {
               $('#question{QID} :text.form-control:eq('+i+')').before('<span class="inserted-suffix"><img class="img-fluid" src="'+images[i][0]+'" /><br />' +images[i][1]+'<button class="btn btn-link pull-right" type="button" onClick="newWindow(' +i+' )"><i class="bi bi-info-circle" style="font-size: 1.5rem; color: cornflowerblue;"></i></button><br/></span>');
           } else {
// else hide the form-control (the text field) in unused cells of the array
               $('#question{QID} :text.form-control:eq('+i+')').hide();
           }
       }
   });
 
</script>

<style type="text/css">
.form-control {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  color: #636363;
  font-size:18px;
  font-weight: bold;
  text-align: center;
  padding: 0;
  display: inline-block;
  width: 50%;
}
</style>