JSFiddle - React, Tailwind, and code Playground

HTML

<div class="champwrap">
  <div class="champselect">
     <img src="" alt="">
  </div>
  
  <div class="champselect">
   <img src="" alt="">
  </div>
</div>

<ul class="charlist">
</ul>

SCSS

.champwrap {
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   .champselect {
      border: 1px solid #e1e1e1;
      min-width: 167px;
      min-height: 300px;
   }
}

.charlist,
.charlist li {
   list-style: none;
   margin: 0;
   padding: 0;
}

.charlist {
   padding-top: 20px;
   display: flex;
   flex-direction: row;
   justify-content: center;
   li {
      padding: 10px;
   }
}

JavaScript

const generateURL = function( imgName ) {
	const imageURL = 'https://cabalmobile.playpark.com/wp-content/uploads/2022/10/';
	const extension = '.webp';
	return imageURL + imgName + extension;
};

const characters = [
	{ thumbnail: 'char_sel_fa_proc', image: 'champ_fa_proc', class:"fa"  },
	{ thumbnail: 'char_sel_wz_cap',  image: 'champ_wz_cap',  class:"wi"  },
	{ thumbnail: 'char_sel_fb_proc', image: 'champ_fb_proc', class: "fb" },
];


$(document).ready(function(){
   
   const charList = $('.charlist');
   const champSelect = $('.champselect');
   
	$.each( characters, function( index, character ) {

      
      // Generating thumbnails: li > img
      const listItem = $('<li>');
      const image = $('<img>', {
         class: character.class,
         src: generateURL( character.thumbnail ),
      }).appendTo( listItem ); // Image is appended inside listItem...
      
      // Add thumbnails to charList
      listItem.appendTo( charList );

      // Thumbnail click event
      listItem.on("click", function() {
         // Loops through each champSelect
         champSelect.each(function() {
            const img = $(this).find('img');
            const newImage = generateURL( character.image );
            // changes the src attribute in each to "character.image"
            img.attr('src', newImage ); 
         });
      });
      

   });

});