JSFiddle - React, Tailwind, and code Playground

by separino

HTML

<div class="champwrap">
<div class="champselect">
<div id="sel-fa" style="display:none;" ><img src="https://cabalmobile.playpark.com/wp-content/uploads/2022/10/champ_fa_proc.webp" /></div>
<div id="sel-wi" style="display:none;"><img src="https://cabalmobile.playpark.com/wp-content/uploads/2022/10/champ_wz_cap.webp" /></div>
<div id="sel-fb" style="display:none;"><img src="https://cabalmobile.playpark.com/wp-content/uploads/2022/10/champ_fb_proc.webp" /></div>
</div>
</div>

<div class="champwrap">
<div class="champselect">
<div id="sel-fa" style="display:none;" ><img src="https://cabalmobile.playpark.com/wp-content/uploads/2022/10/champ_fa_proc.webp" /></div>
<div id="sel-wi" style="display:none;"><img src="https://cabalmobile.playpark.com/wp-content/uploads/2022/10/champ_wz_cap.webp" /></div>
<div id="sel-fb" style="display:none;"><img src="https://cabalmobile.playpark.com/wp-content/uploads/2022/10/champ_fb_proc.webp" /></div>
</div>
</div>

<ul class="charlist">
<li><div class="fa"><img src="https://cabalmobile.playpark.com/wp-content/uploads/2022/10/char_sel_fa_proc.webp"/></div></li>
<li><div class="wi"><img src="https://cabalmobile.playpark.com/wp-content/uploads/2022/10/char_sel_wz_cap.webp"/></div></li>
<li><div class="fb"><img src="https://cabalmobile.playpark.com/wp-content/uploads/2022/10/char_sel_fb_proc.webp"/></div></li>
</ul>

CSS

.charlist li {
  display:inline-block;
}

.champwrap {
 width:167px;
 height:300px;
 border:1px solid black;
 display: inline-block;
}

JavaScript

$(document).ready(function(){

$(".fa").click(function(){$(".champselect div").hide();
$("#sel-fa").show();
});
$(".wi").click(function(){$(".champselect div").hide();
$("#sel-wi").show();
});
$(".fb").click(function(){$(".champselect div").hide();
$("#sel-fb").show();
});
})