JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Example of the structure from the site -->
<div id="ywapo_value_8" class="ywapo_group_container
		ywapo_group_container_radio		form-row form-row-wide
		min_qty_0				  " data-requested="0" data-requested-all-options="0" data-type="radio" data-id="8" data-operator="or" data-condition="" data-condition-variations="" data-sold-individually="0" data-first-options-free="0" data-first-options-free-temp="0" data-max-item-selected="0" data-minimum-product-quantity="0" data-change-featured-image="0" data-calculate-quantity-sum="0" data-max-input-values-amount="0" data-min-input-values-amount="0" style="">
	
	
		<h3 style="cursor: pointer;"><span class="dashicons dashicons-arrow-down" style="height: 30.8px; line-height: 30.8px;"></span> 
			Колір нітки								</h3>
	
	
	
	
	<div class="ywapo_options_container">

		
		<div class="ywapo_input_container ywapo_input_container_radio"><input id="ywapo_ctrl_id_8_0" placeholder="" data-typeid="8" data-price_x="0" data-price="0" data-pricetype="fixed" data-index="0" type="radio" name="ywapo_radio_8[]" value="0" class="ywapo_input ywapo_input_radio ywapo_price_fixed"><label for="ywapo_ctrl_id_8_0" class="ywapo_label with_image ywapo_label_tag_position_after"><img src="https://kozakcraft.com.ua/wp-content/uploads/2021/08/p2830826-scaled.jpg" fullsize="https://kozakcraft.com.ua/wp-content/uploads/2021/08/p2830826-scaled.jpg" alt="" class="ywapo_single_option_image"><span class="ywapo_option_label ywapo_label_position_after">5467</span> </label><label for="ywapo_ctrl_id_8_0" style="cursor: pointer;"></label></div><div class="ywapo_input_container ywapo_input_container_radio"><input id="ywapo_ctrl_id_8_1" placeholder="" data-typeid="8" data-price_x="0" data-price="0" data-pricetype="fixed" data-index="1" type="radio" name="ywapo_radio_8[]" value="1" class="ywapo_input ywapo_input_radio ywapo_price_fixed"><label for="ywapo_ctrl_id_8_1" class="ywapo_label with_image ywapo_label_tag_position_after"><img...

CSS

.overlay { background-color: rgba(0, 0, 0, 0.7); bottom: 0; cursor: default; left: 0; opacity: 0; position: fixed; right: 0; top: 0; visibility: hidden; z-index: 1; transition: opacity .5s;}
.popup {background: #fff; display: inline-block; left: 50%; opacity: 0; padding: 50px 30px; height: auto; position: fixed; text-align: center; top: 50%; visibility: hidden; z-index: 1; transform: translate(-50%, -50%); transition: opacity .5s, top .5s;}

img {width:150px;}

JavaScript

$(document).ready(function(){
 $('.popup .close_window, .overlay').click(function (){
  $('.popup, .overlay').css({'opacity':'0', 'visibility':'hidden'});
 });
 
 $('.ywapo_input_container .ywapo_label.with_image img').click(function (e){
 	var imgSrc = e.target.src;

  $('.popup .img img').attr('src', imgSrc);
  $('.popup, .overlay').css({'opacity':'1', 'visibility':'visible'});
  e.preventDefault();
 });
});