.on('Input') Dynamic Updates And Additions

I have a set of HTML number inputs with ID's YXS, YSM, YMED I can get the values of each input, add them together, and display the result to #output. HOWEVER, it only works when e

Solution 1:

Your problem is that your input event handlers are nested. So YSM and YMED trigger if only YXS is triggered.

Actually you don't need to have a separate handler for each input. See the snippet below:

$('#YXS, #YSM, #YMED').on("input", function() {
        var totalPrice = 0;
        $('#YXS, #YSM, #YMED').each(function(i, e) {totalPrice += ~~e.value});
        var Silver = totalPrice * 0.9;                 
        var Gold = totalPrice * 0.85;           
        var Plat = totalPrice * 0.8;
        $('#output').text(totalPrice);
        $("#output_Silver").html(Silver.toFixed(2));
        $("#output_Gold").html(Gold.toFixed(2));
        $("#output_Plat").html(Plat.toFixed(2));
    });

label, h3 {display:flex;
justify-content:space-between;
width:14rem; margin:1rem 0; padding:0}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label>YXS: <input id="YXS"></label>
<label>YSM: <input id="YSM"></label>
<label>YMED: <input id="YMED"></label>

<h3>Silver: <span id="output_Silver">0.00</span></h3>
<h3>Gold: <span id="output_Gold">0.00</span></h3>
<h3>Plat: <span id="output_Plat">0.00</span></h3>
<h3>Total: <span id="output">0</span></h3>