I'm working on an auto calculation form which is a total column will change after a radio and a dropdown is clicked. I can make the total change for both dropdowns but the problem occurs when I tried to add a radio option. Here is my code.

HTML

Ages 10+:
<select id="Adult" name="Adult">
    <option selected="selected" value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
</select>
<br />Ages 3-9:
<select id="Child" name="Child">
    <option selected="selected" value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
</select>
<br />Food
<input type="radio" name="food" id="food0" value="0" />
<label for="food0">No</label>
<input type="radio" name="food" id="food1" value="10" />
<label for="food1">Yes</label>
<table width="100%" border="1" align="center">
    <tr>
        <td>Product</td>
        <td>Ages 10+</td>
        <td>Ages 3-9</td>
        <td>Food</td>
        <td>Price</td>
    </tr>
    <tr>
        <td>2 Day Ticket</td>
        <td>$235.00</td>
        <td>$223.00</td>
        <td><span id="food">0</span>

        </td>
        <td>$<span class="amount" id="2DayTotal"></span> 
        </td>
    </tr>
    <tr>
        <td>3 Day Ticket</td>
        <td>$301.00</td>
        <td>$285.00</td>
        <td><span id="food">0</span>

        </td>
        <td>$<span class="amount" id="3DayTotal"></span>

        </td>
    </tr>
    <tr>
        <td>4 Day Ticket</td>
        <td>$315.00</td>
        <td>$298.00</td>
        <td><span id="food">0</span>

        </td>
        <td>$<span class="amount" id="4DayTotal"></span>

        </td>
    </tr>
    <tr>
        <td>5 Day Ticket</td>
        <td>$328.00</td>
        <td>$309.00</td>
        <td><span id="food">0</span>

        </td>
        <td>$<span class="amount" id="5DayTotal"></span>

        </td>
    </tr>
</table>

JavaScript

var numAdult = 0;
var numChild = 0;

$("#Adult").change(function () {
    numAdult = $("#Adult").val();
    calcTotals();
});
$("#Child").change(function () {
    numChild = $("#Child").val();
    calcTotals();
});
$('input[type=radio]').change(function(evt) {
    $('#food').html($(this).val());
});

function calcTotals() {
    $("#2DayTotal").text(235 * numAdult + 223 * numChild);
    $("#3DayTotal").text(301 * numAdult + 285 * numChild);
    $("#4DayTotal").text(315 * numAdult + 298 * numChild);
    $("#5DayTotal").text(328 * numAdult + 309 * numChild);
}

The issues are:

1. I'd like the food column change to it's value when a radio is click. It works only the first id.
2. After a radio is clicked. A fumction calcTotals() is called to sum an additional food cost.

Demo here : http://jsfiddle.net/4Jegn/178/

Please be advice.