JSFiddle - React, Tailwind, and code Playground

by Good Muyis

HTML

<select name='anch1' class="guestnum">
 <option value='10'>10 ++</option>
 <option value='20'>20 ++</option>
 <option value='30'>30 ++</option>
 <option value='40'>40 ++</option>
 <option value='50'>50 ++</option>
</select>

<select name='anch2' class="guestnum">
 <option value='10'>10 ++</option>
 <option value='20'>20 ++</option>
 <option value='30'>30 ++</option>
 <option value='40'>40 ++</option>
 <option value='50'>50 ++</option>
</select>

<select name='anch3' class="guestnum">
 <option value='10'>10 ++</option>
 <option value='20'>20 ++</option>
 <option value='30'>30 ++</option>
 <option value='40'>40 ++</option>
 <option value='50'>50 ++</option>
</select>
<br />
<input type="text" id="guest" />
<div id='sum'>SUM OF SELECTED OPTIONS</div>

JavaScript

$('.guestnum').change(function(){
    var sum = 0;
    $('.guestnum :selected').each(function() {
        sum += Number($(this).val());
    });
     $("#guest").val(sum);
});