JSFiddle - React, Tailwind, and code Playground

by Bhushan Kawadkar

HTML

<select name="amount_3" class="form-control select-control" required>
    <option disabled selected value="">No. of Vouchers</option>
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    ...
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
    <option value="25">25</option>
</select>
<select name="amount_2" class="form-control select-control" required>
    <option disabled selected value="">No. of Vouchers</option>
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    ...
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
    <option value="25">25</option>
</select>
<select name="amount_1" class="form-control select-control" required>
    <option disabled selected value="">No. of Vouchers</option>
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    ...
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
    <option value="25">25</option>
</select>

JavaScript

$(function(){
$(".select-control").change(function() {
        //iterate all select box and add values to total
        var total = parseInt($(this).val());
        $(".select-control").not(this).each(function() {
            if(parseInt($(this).val()))
            {
            total += parseInt($(this).val());
            }
        });
        alert(total);
    });
});