Two jquery scripts to sum form input

Question

I am building some widgets that allow users to select radio buttons and jquery then calculates the total due. Currently, the jquery calculations are getting mixed up since they are on the same page. I tried changing #ids and such, but its still not working. Here is what I have so far:

Widget 1

<script type="text/javascript">
jQuery(document).ready(function($) {
    function recalculate() {
        var sum = 0;

        $("input[type=radio]:checked").each(function() {
            sum += parseInt($(this).attr("value"));
        });

        $("#output").html(sum.toFixed(2));
    }

    $("input[type=radio]").change(function() {
        recalculate();
        $('#invoice_description').val($(this).attr('rel'));
    });
});
</script>

Sample of my form

<div class="form-row">
    <div class="form-row-title"><input type="radio" class="checkbox" name="register" value="<?php echo $vendor; ?>" checked /></div>
    <div class="form-row-label">Vendor Registration (Up To 3 Attendees:  $<?php echo $vendor; ?>)</div>
    <div class="clear"></div>
</div>

<div class="form-row">
    <div class="form-row-title" style="color: #090; font-weight: 700;">Total Due:</div>
    <div class="form-row-content" style="padding: 10px 0;"><b><span id="output">0.00</span></b></div>
    <div class="clear"></div>
</div>

Widget 2

<script type="text/javascript">
jQuery(document).ready(function($) {
    function recalculate() {
        var sum = 0;

        $(".dues input[type=radio]:checked").each(function() {
            sum += parseInt($(this).attr("value"));
        });

        $("#output2").html(sum.toFixed(2));
    }

    $(".dues input[type=radio]").change(function() {
        recalculate();
        $('#dues_description').val($(this).attr('rel'));
    });
});
</script>

Sample of widget 2 form

<div class="form-row">
    <div class="form-row-title">
    <input type="radio" id="general" class="dues" name="membership" value="<?php echo $general; ?>" rel="General Society Membership" />
    </div>
    <div class="form-row-label">General Society Membership ($<?php echo $general; ?>) <i id="general-tip" class="fa fa-question-circle fa-1x"></i></div>
    <div class="clear"></div>
</div>

<div class="form-row">
    <div class="form-row-title" style="color: #090; font-weight: 700;">Total Due:</div>
    <div class="form-row-content" style="padding: 10px 0;"><b><span id="output2">0.00</span></b></div>
    <div class="clear"></div>
</div> 

Answer 1

Ok finally got this figured out. It was a bit tricky since I have other scripts also running but this is what worked for me.

function recalculate() {
    var sum = 0;

    $(".mtg:checked").each(function () {
        sum += parseInt($(this).attr("value"));
    });

    $("#output").html(sum.toFixed(2));
}

I changed the listener to be the input class instead of input type. That way I was able to set different classes and not have a conflict.