I suggest you try this:
1) Wrap fire, water, earth… into a hidden div, for example:
<div class="child_div div-fire"> <p>fire <select id="wpv_control_select_fire" name="fire" style="" class="wpcf-form-select form-select select"> <option value="3" class="wpcf-form-option form-option option"></option> <option value="1" class="wpcf-form-option form-option option">heat</option> <option value="2" class="wpcf-form-option form-option option">flame</option> </select> </p> </div> <div class="child_div div-water"> <p>water <select id="wpv_control_select_water" name="water" style="" class="wpcf-form-select form-select select"> <option value="3" class="wpcf-form-option form-option option"></option> <option value="1" class="wpcf-form-option form-option option">salty</option> <option value="2" class="wpcf-form-option form-option option">fresh</option> </select> ...
2) add a css to hidden all .child_div , like this:
<style type="text/css" media="screen">.child_div{ display:none; }</style>
3) add JS to show/hide each div like this:
<script type="text/javascript">
jQuery(document).ready(function($){
$('#wpv_control_select_force').change(function() {
$('.child_div').hide();
var force = $('#wpv_control_select_force').val();
if(force == '1')$('.div-fire').show();
if(force == '2')$('.div-water').show();
if(force == '3')$('.div-earth').show();
});
});
......
</script>