Get val of input of any variable with jQuery

I have a form and I need to perform an action if a certain input is changed. In my jQuery, I have a three input fields set to a different variable e.g:

var workOrderInput = jQuery(".work-order-select input");
var eventSchedulerInput = jQuery(".event-scheduler .gchoice_2_13_0 #choice_2_13_0");
var eventSchedulerSelect = jQuery(".event-scheduler select");

In order to find out if the input changes, I am using:

jQuery([workOrderInput, eventSchedulerInput, eventSchedulerSelect]).each(function() {
    jQuery(this).change(function() {

    });
});

If one of the input fields changes, I would like to set a variable to the value of a hidden input field e.g.

jQuery([workOrderInput, eventSchedulerInput, eventSchedulerSelect]).each(function() {
    jQuery(this).change(function() {
        var totalCost = jQuery(".signup-cost #field_2_22 #input_2_22").val();
        console.log(totalCost);
    });
});

Right now, the totalCost variable gets set but only on the second click. For example, If I click on ".work-order-select input" nothing happen. Only when I click on another input does the variable get set and show up in the console.

Edit: Here is my HTML

<form>
    <div class="work-order-select">
        <input type="radio" name="wo1" value="14.99">
        <input type="radio" name="wo2" value="24.99">
        <input type="radio" name="wo2" value="34.99">
    </div>
    <div class="event-scheduler">
        <input type="radio" name="es1" value="44.99">
        <select name="es1" >
            <option value="Square Footage|0">Square Footage</option>
            <option value="Under 50,000($29.00/mt)|29">Under 50,000($29.00/mt)</option
            <option value="Under 75,000($49.00/mt)|49">Under 75,000($49.00/mt)</option>
            <option value="Under 100,000($59.00/mt)|59">Under 100,000($59.00/mt)</option>      
        </select>
    <div>
    <div>
        <span class="total"></span>
        <input type="hidden" id="input_2_22" value="49.99">
    </div>
</form>

Right now, as soon as one of the radio buttons are select, or the drop down changes, the input value of #input_2_22 is updated.

Using mouseup() also works...kind of. If I use:

jQuery([workOrderInput, eventSchedulerInput, eventSchedulerSelect]).each(function() {
    jQuery(this).mouseup(function() {
        var totalCost = jQuery(".signup-cost #field_2_22 #input_2_22").val();
        console.log(totalCost);
    });
}); 

The first radio button that is select returns nothing. It's literally an empty line in Chrome's web inspector. The second time I click on a radio button, the value of the previous radio button I clicked on is shown.

Edit 2: All of the above is fixed with:

jQuery("#choice_2_13_0, #choice_2_10_0, #choice_2_10_1, #choice_2_10_2").addClass("discount-class");

jQuery(".discount-class").change(function() {
    setTimeout(function() {
        var totalCost = jQuery(".signup-cost #input_2_22").val();
        var totalDiscount = (totalCost * .2).toFixed(2);
        var afterDiscount = (totalCost - totalDiscount).toFixed(2);
        console.log(totalDiscount);
        jQuery("#input_2_23").val(totalDiscount);
    }, 1000);
});

Now, I only need the change function to fire if one of the "wo" radio buttons are selected and the select value does not equal "Square Footage|0". With no luck I'm trying:

if (jQuery(".discount-class").is(':checked') && jQuery("#input_2_14").val != 'Square Footage|0') {