JSFiddle - React, Tailwind, and code Playground

HTML

<div class="champwrap"></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;
   }
   
   img {
      border: 3px solid transparent;
   }
   
   .selected > img {
      border: 3px solid orange;
      box-shadow: 0 0 10px rgba(orange, .5);
   }
}

JavaScript

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

const selectableChamps = 2;

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" },
];

const champClicked = function(character, listItem, charList, champWrap) {

	// UNSELECT
	if ( listItem.hasClass('selected') ) {

   	listItem.removeClass('selected');
      
		const undoSlot = champWrap.find('[data-character="'+ character.thumbnail +'"]');
		undoSlot.attr('src', '').hide();
      
   }
   // SELECT
   else {
   
      // First occurrence of a hidden image
      const nextSlot = champWrap.find('img:hidden:first');
      if ( nextSlot.length > 0 ) {
      
	   	listItem.addClass('selected');
         
         // Add src and show the image element
         const newImage = generateURL( character.image );
         nextSlot.attr('src', newImage ).show(); 
         
         // Used to identify selected character on unselect
         nextSlot.attr( 'data-character', character.thumbnail );
         
      }
   }
   
};


// Generating elements
$(document).ready(function(){
   
   const charList = $('.charlist');
   const champWrap = $('.champwrap');

	// Creating champ selectors
	$.each( new Array(selectableChamps), function( index, selector ) {
   	
      const champSelect = $('<div>', {
      	class: 'champselect'
      });
      
      const img = $('<img>', {
      	draggable: false,
      	css: {
         	display: 'none',
         }
      }).appendTo( champSelect );
  
  		champSelect.appendTo( champWrap );
      
   });

	// Character list
	$.each( characters, function( index, character ) {

      // Generating thumbnails: li > img
      const listItem = $('<li>');
      const image =...