I don't have a lot of experience working with javascript so this is probably an easily answerable question. I have an issue where I have several radio button groups and when one is clicked, it needs to run the function calcPrice() which will then change the value of the price text box. The first radio button group is for size and looks like this:

<input type="radio" name="size" value="Mini" onclick="calcPrice();" />Mini&nbsp;&nbsp;&nbsp;
<input type="radio" name="size" value="Small" onclick="calcPrice();" />Small&nbsp;&nbsp;&nbsp;
etc...

The next radio button groups are generated from php and end with a result like this:

<font color="red">1) Pepperoni</font><br />
        <input type="radio" id="ingredient" name="Pepperoni" value="Left" onclick="calcPrice();" />Left&nbsp;&nbsp;&nbsp;
        <input type="radio" id="ingredient" name="Pepperoni" value="Whole" onclick="calcPrice();" />Whole&nbsp;&nbsp;&nbsp;
        <input type="radio" id="ingredient" name="Pepperoni" value="Right" onclick="calcPrice();" />Right&nbsp;&nbsp;&nbsp;<br /><br />
                <font color="red">2) Sausage</font><br />
        <input type="radio" id="ingredient" name="Sausage" value="Left" onclick="calcPrice();" />Left&nbsp;&nbsp;&nbsp;
        <input type="radio" id="ingredient" name="Sausage" value="Whole" onclick="calcPrice();" />Whole&nbsp;&nbsp;&nbsp;
        <input type="radio" id="ingredient" name="Sausage" value="Right" onclick="calcPrice();" />Right&nbsp;&nbsp;&nbsp;<br /><br />

For some reason when I click on any radio button, it deselects any other radio button on the page. I can only have one radio button selected at a time even though all their names are different. Why does it do this and how can I make it not do that?

Edit: the code: http://jsbin.com/eziyal/1/edit

Edit2: solved! Thanks hbish