JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<label class="product">Product</label>
<span>
<input name="category" type="radio" value="10" id="product1">
<label>Product A</label>
<input name="category" type="radio" value="20" id="product2">
<label>Product B</label>
<input name="category" type="radio" value="30" id="product3">
<label>Product C</label>
<input name="category" type="radio" value="40" id="product4">
<label>Product D</label>
    </span></div>
    
<div>
<label class="gender">Gender</label>
<span>
<input name="gender" type="radio" value="male" id="male">
<label>Male</label>
<input name="gender" type="radio" value="female" id="female">
<label>Female</label>
    </span></div>
    
    <span>Show Price: <span id="price"></span></span>

CSS

div
{
	color:#444;
    width:90%;
    height:50px;
    background-color:#d9eae8;
	margin:0 4px 0 0;
	padding:10px;
    border:1px solid #888;
}

JavaScript

$(document).ready(function() {


    $('[type="radio"]').on('change', function() {
        if ($('input[name=gender]:checked')) {
            var gender = $('input[name=gender]:checked').val();
            //console.log(gender); 
            if (gender == 'male') {
                
                 var price = $('input[name=category]:checked').val();
                $('#price').text(price);
                 
                
            }
            else if(gender=="female") {
                

                $('#price').text('10');
            }
        }
    });



});