JSFiddle - React, Tailwind, and code Playground

HTML

<div>
		<label>How Many Pallets</label>
		<select name="number" onChange="updateValue();">
	    	<option name="number" value="1">1</option>
	        <option name="number" value="2">2</option>
	        <option name="number" value="3">3</option>
	        <option name="number" value="4">4</option>
	        <option name="number" value="5">5</option>
	    </select>
	</div>
	
	<div>
		<label>Shipping From:</label>
	    <select name="shipping_from" id="shipping_from">
	        <option value="Select Country">Select Country</option>
	        <option value="United Kingdom">United Kingdom</option>
	        <option value="France">France</option>
	        <option value="Germany">Germany</option>
	    </select>
    </div>
    
    <div>
	    <label>Shipping To:</label>
	    <select name="shipping_to" id="shipping_to">
	        <option value="Select Country">Select Country</option>
	        <option value="United Kingdom">United Kingdom</option>
	        <option value="France">France</option>
	        <option value="Germany">Germany</option>
	    </select>
  	</div>
    
    	<form id="from" onChange="updateValue();">
			
			<div id="from-united-kingdom"><!-- Open United Kingdom -->
				<div>
	    			<input type="radio" id="uk-zone-1" name="from_country" value="1" />
	       	 		<label for="uk-zone-1"><span class="uk1"></span>UK Zone One</label>
				</div>
				
				<div>
					<input type="radio" id="uk-zone-2" name="from_country" value="2" />
	        		<label for="uk-zone-2"><span class="uk2"></span>UK Zone Two</label>
	        	</div>
	        	
	        	<div>
	        		<input type="radio" id="uk-zone-3" name="from_country" value="3" />
	        		<label for="uk-zone-3"><span class="uk3"></span>UK Zone Three</label>
				</div>
				
				<div>
					<input type="radio" id="uk-zone-4" name="from_country" value="4" />
	        		<label for="uk-zone-4"><span class="uk4"></span>UK Zone Four</label>
	  			</div>
  			</div><!-- Close United Kingdom -->
  			
  			<div...

CSS

#from-united-kingdom { display: none; }
#from-france { display: none; }
#from-germany { display: none; }

#to-united-kingdom { display: none; }
#to-france { display: none; }
#to-germany { display: none; }


.uk-zones2 { display: none; /* position: relative; width: 218px; height: 359px; margin: 50px 0 0 50px; */ }
.de-zones2 { display: none; }
.fr-zones2 { display: none; }

JavaScript

var values = [
    [20,25,35,40],
    [36,42,50,56],
    [42,56,52,68],
    [60,70,68,72],
];
    
function updateValue() {
    var fromCountry = $('input[name="from_country"]:checked').val();
    var toCountry = $('input[name="to_country"]:checked').val();
    
    
    var totalValues = values[fromCountry-1][toCountry-1];
    var quantity = $('select[name="number"]');
    var x = parseInt(quantity.value, 10);
    
    if(fromCountry && toCountry) {
        #('#cost').value = (totalValues * x);
    }
}

$(document).ready(function() {
			
    $("#shipping_from").on('change',function() {
        // foo is the id of the other select box 
        if ($(this).val() == "United Kingdom") {
            $("#from-united-kingdom").show();
        }else{
            $("#from-united-kingdom").hide();
        }
        
        if ($(this).val() == "France") {
            $("#from-france").show();
        }else{
            $("#from-france").hide();
        } 
        
        if ($(this).val() == "Germany") {
            $("#from-germany").show();
        }else{
            $("#from-germany").hide();
        }
    });
    
    $("#shipping_to").change(function() {
         // foo is the id of the other select box 
        if ($(this).val() == "United Kingdom") {
            $("#to-united-kingdom").show();
        } else{
            $("#to-united-kingdom").hide();
        }
        
        if ($(this).val() == "France") {
            $("#to-france").show();
        }else{
            $("#to-france").hide();
        } 
        
        if ($(this).val() == "Germany") {
            $("#to-germany").show();
        }else{
            $("#to-germany").hide();
        }
        
    });
                        
});