JSFiddle - React, Tailwind, and code Playground

by Bhavesh Suru

HTML

<form id="from" onChange="updateValue();">
		<div><input type="radio" name="from_country" value="1">UK zone 1</div>
		<div><input type="radio" name="from_country" value="2">UK zone 2</div>
		<div><input type="radio" name="from_country" value="3">UK zone 3</div>
		<div><input type="radio" name="from_country" value="4">UK zone 4</div>
	</form>
	
	<br />

    <form id="to" onChange="updateValue();">
        <div><input type="radio" name="to_country" value="1">France zone 1</div>
        <div><input type="radio" name="to_country" value="2">France zone 2</div>
        <div><input type="radio" name="to_country" value="3">France zone 3</div>
        <div><input type="radio" name="to_country" value="4">France zone 4</div>
    </form>
    
    <br />
    
<label for="number">Quanity</label>    <select name="number">
        <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>
	
	<br />
	<br />
	
	<label for="cost">Cost</label>
	<input type="text" id="cost" />

JavaScript

var values = [
      		[20,25,35,40],
      		[36,42,50,56],
      		[42,56,52,68],
      		[60,70,68,72]
    	];

  		function updateValue() {
        var fromCountry = document.querySelector('input[name="from_country"]:checked').value;
        var toCountry = document.querySelector('input[name="to_country"]:checked').value;

        var totalValues = values[fromCountry-1][toCountry-1];
        var fixValues = document.querySelector('select[name="number"]');
        var n = parseInt(fixValues.value, 10);

        if(fromCountry && toCountry) {
            document.getElementById('cost').value = (totalValues * n);
        }
    }