JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select id="selectA">
    <option value=" " disabled selected>Choose One...</option>
    <option id="option1" value="5">Mike</option>
    <option id="option2" value="10">Andrew</option>
    <option id="option3" value="15">Michael</option>
    <option id="option4" value="20">Danny</option>
    <option id="option5" value="25">Cozz</option>
    <option id="option6" value="30">Andrew</option>
    <option id="option7" value="35">Pete</option>
    <option id="option8" value="40">Sean</option>
    <option id="option9" value="45">Dom</option>
    <option id="option10" value="50">Marc</option>
    <option id="option11" value="0">Lou</option>
    <option id="option12" value="0">Rob</option>
</select>
<select id="selectB">
    <option value=" " disabled selected>Choose One...</option>
    <option id="option1" value="5">Mike</option>
    <option id="option2" value="10">Andrew</option>
    <option id="option3" value="15">Michael</option>
    <option id="option4" value="20">Danny</option>
    <option id="option5" value="25">Cozz</option>
    <option id="option6" value="30">Andrew</option>
    <option id="option7" value="35">Pete</option>
    <option id="option8" value="40">Sean</option>
    <option id="option9" value="45">Dom</option>
    <option id="option10" value="50">Marc</option>
    <option id="option11" value="0">Lou</option>
    <option id="option12" value="0">Rob</option>
</select>

<progress id='progressBar' max='100' value='0'></progress>

JavaScript

function update_progressbar() {
    var opt1 = parseInt( $('option:selected', $('#selectA')).val() );
    var opt2 = parseInt( $('option:selected', $('#selectB')).val() );

	  var total = isNaN( opt1 ) ? 0 : opt1;
    if ( !isNaN( opt2 ) ) {
        total += opt2;
    }
    $("#progressBar").prop( 'value', total )
}

$('#selectA').on( 'change', update_progressbar );
$('#selectB').on( 'change', update_progressbar );