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') {
                $('#product1').click(function(e) {
                    $('#price').html('');
                    var product1 = $('#product1').val();
                    console.log('male');
                    console.log(product1);
                    $('#price').append(product1);
                });
                $('#product2').click(function(e) {
                    $('#price').html('');
                    var product2 = $('#product2').val();

                    $('#price').append(product2);
                });
                $('#product3').click(function(e) {
                    $('#price').html('');
                    var product3 = $('#product3').val();
                    $('#price').append(product3);
                });
                $('#product4').click(function(e) {
                    $('#price').html('');
                    var product4 = $('#product4').val();
                    $('#price').append(product4);
                });
            }
            else if(gender=="female") {
                console.log('fem');
                $('#price').html('');
                var product = 0;
                product = 10;

                $('#price').append(product);
            }
        }
    });



});