Checkboxes to display total not working as planned

This is my JavaScript

<script type="text/javascript">
   $('#inputs input').change(function() {
   if (this.checked) {
   $span = $('<span></span>');
   $span.text(this.value);
   $('#results').append($span);
   }
   else {
   $('span:contains('+this.value+')', '#results').remove();
   }
   });
   </script>

This is my html

<div id="inputs">
<input type="checkbox" name="amount" value="50.00"></input>
<input type="checkbox" name="amount" value="20.00"></input>
<input type="checkbox" name="amount" value="15.00"></input>
<input type="checkbox" name="amount" value="10.00"></input>
<span>Total: $</span><span id="results"></span>

Since the checkboxes all have the same name it groups them so only one can be checked at a time, my question is: How to make this so the value for the first checkbox checked goes away when another checkbox is checked. This works only if you check a box then uncheck the same box, but if you check a box then check another you will see two values appear. I can not figure this out. Any help will be greatly appreciated. Thank you!