JSFiddle - React, Tailwind, and code Playground

by BumbleB2na

HTML

<select name="material">
        <option value="0">-- Please Select --</option>
        <option value="1">Wood</option>
        <option value="2">Plastic</option>
        <option value="3">Metal</option>
    </select>
<span id="pprice"></span>
<br />
<select name="material2">
        <option value="0">-- Please Select --</option>
        <option value="3">Metal</option>
        <option value="4">Cloth</option>
        <option value="5">UPVC</option>
    </select>
<span id="pprice2"></span>

JavaScript

var price = ['','$2.00','$45.00','$60.00','$35.00','$25.00','$60.00'];
    $(function(){
        $('select[name=material]').change(function(){
          document.getElementById('pprice').innerHTML = price[$(this).val()];
        }); 
        $('select[name=material2]').change(function(){
          document.getElementById('pprice2').innerHTML = price[$(this).val()];
        }); 

        // Trigger on dom ready
        $('select[name*=material]').change();
    });