JSFiddle - React, Tailwind, and code Playground

by David Sch

HTML

<ul class="wc_payment_methods payment_methods methods">


			<li class="wc_payment_method payment_method_paypal">
	<input id="payment_method_paypal" type="radio" class="input-radio" name="payment_method" value="paypal" checked="checked" data-order_button_text="Weiter zu PayPal">

	<label for="payment_method_paypal">
		abcd	</label>
	</li>
  
  
<li class="wc_payment_method payment_method_stripe_cc wc-stripe-no-desc">
	<input id="payment_method_stripe_cc" type="radio" class="input-radio" name="payment_method" value="stripe_cc" data-order_button_text="">

	<label for="payment_method_stripe_cc">
		abcd	</label>
    </li>

		</ul>

CSS

.wc_payment_method label:hover { box-shadow: 0 0 5px #fbb9ab; border-color: white;} /* hover on payment method */
.wc_payment_method label { display: block; }

.xxx_selected { border: 1px solid #fbb9ab !important; }

.input-radio {display: none;}

JavaScript

jQuery( document ).ready(function() {

//NEW
jQuery('.wc_payment_methods *').click(function() {
   		jQuery(this).addClass('xxx_selected');
		})
});