.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});
        varSilver = totalPrice * 0.9;                 
        varGold = totalPrice * 0.85;           
        varPlat = 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:1rem0; padding:0}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><label>YXS: <inputid="YXS"></label><label>YSM: <inputid="YSM"></label><label>YMED: <inputid="YMED"></label><h3>Silver: <spanid="output_Silver">0.00</span></h3><h3>Gold: <spanid="output_Gold">0.00</span></h3><h3>Plat: <spanid="output_Plat">0.00</span></h3><h3>Total: <spanid="output">0</span></h3>