JSFiddle - React, Tailwind, and code Playground

HTML

<select name='aa'>

</select>

<select name='bb'>

</select>

<select name="options_1_1_1">
    <option data-value="1" value="1" selected>Option 1</option>
    <option data-value="2" value="2">Option 2</option>
    <option data-value="3" value="3">Option 3</option>
</select>

<select name="options_1_1_2">
    <option data-value="1" value="1" selected>Option 1</option>
    <option data-value="2" value="2">Option 2</option>
    <option data-value="3" value="3">Option 3</option>
</select>

<select name="options_1_1_3">
    <option data-value="1" value="1" selected>Option 1</option>
    <option data-value="2" value="2">Option 2</option>
    <option data-value="3" value="3">Option 3</option>
</select>

<select name="options_1_1_4">
    <option data-value="1" value="1" selected>Option 1</option>
    <option data-value="2" value="2">Option 2</option>
    <option data-value="3" value="3">Option 3</option>
</select>

<select name="options_1_2_1">
    <option data-value="1" value="1">Option 1</option>
    <option data-value="2" value="2" selected>Option 2</option>
    <option data-value="3" value="3">Option 3</option>
</select>

<select name="options_1_2_2">
    <option data-value="1" value="1">Option 1</option>
    <option data-value="2" value="2" selected>Option 2</option>
    <option data-value="3" value="3">Option 3</option>
</select>

<div id="total_1">Total: 0</div>
<div id="description"></div>

CSS

* {
	margin:0;
	padding:0;
	list-style:none;
}
body {
	font-size:14px;
}
.nav {
	width:200px;
	height:30px;
	margin:20px auto;
}
.nav p {
	display:block;
	padding-left:10px;
	line-height:30px;
	border:1px solid #CCC;
}
.set {
	background:url(images/btn_2.png) 165px 10px no-repeat;
}
.select {
	background:url(images/btn_1.png) 165px 10px no-repeat;
}
.new {
	width:198px;
	position:absolute;
	border:1px solid #CCC;
	display:none;
}
.nav ul li {
	line-height:30px;
	padding-left:10px;
}
.nav ul li:hover {
	background:#CCC;
	color:#FFF;
}

JavaScript

$("select[name='aa']").append("<option data-value='1' value='a' selected>dd</option>")
$("select[name='aa']").append("<option data-value='2' value='b'>cc</option>")
$("select[name$='_1_1']").hover(function(){ var x = 1; dex(x) });
$("select[name$='_1_2']").hover(function(){ var x = 2; dex(x) });
$("select[name$='_1_3']").hover(function(){ var x = 3; dex(x) });
$("select[name$='_1_4']").hover(function(){ var x = 4; dex(x) });
$("select[name$='_2_1']").hover(function(){ var x = 5; dex(x) });
$("select[name$='_2_2']").hover(function(){ var x = 6; dex(x) });

$(function() {
    $("select[name='aa']").change(function() { updateOptions(); });
    $("select[name*='options_1']").change(function() {var x=1; updateTotal(x); });
});

function updateOptions() {
    var c = $("select[name='aa'] option:selected").val()
    if (c=='a'){
        $("select[name='bb']").empty()
        $("select[name='bb']").append("<option data-value='1' value='a' selected>dd</option>")
        $("select[name='bb']").append("<option data-value='2' value='b'>cc</option>")
    }else if (c=='b'){
        $("select[name='bb']").empty()
        $("select[name='bb']").append("<option data-value='1' value='a' selected>op</option>")
        $("select[name='bb']").append("<option data-value='2' value='b'>po</option>")
    }
}

function updateTotal(x) {
    var newTotal = 1;
    var xTotal = 0;
    $("select[name*='options_"+x+"_1'] option:selected").each(function() {
        xTotal += Math.pow(2,parseFloat($(this).data('value')));
    });
    $("select[name*='options_"+x+"_2'] option:selected").each(function() {
        newTotal *= parseFloat($(this).data('value'));
    });
    var result = Math.log(xTotal)/Math.log(10)*newTotal
    $("#total_"+x).text("Total: " + result.toFixed(2));
}

function dex(x){
    if(x==1)
        $('#description').text("1")
    else if(x==2)
        $('#description').text("2")
    else if(x==3)
        $('#description').text("3")
    else if(x==4)
       ...