Cannot Locate Dynamically Loaded Control With GetElementById

I'm having a problem with some dynamically loaded content.
1. Ajax request returns some content that goes in a div. Inside that content, there's a text box with the id "coupon"
2. Also inside that content is a script called add_coupon that sends another ajax request. Use pushes a button, function gets called, all is well.
3. Inside the function, "document.getElementById ( 'coupon' )" returns undefined.

Behold:
<script language='javascript'>
function add_coupon() {
document.getElementById('cart_cc').innerHTML = "<img src='spinner.gif'>";
var coupon = document.getElementById('coupon');
if ( !coupon )
alert ( 'no coupon box' );
$(function() {
$.ajax({
type: 'POST',
url: '/store/ajax_add_coupon/'+$('#coupon').val(),
success: function(data) { $('#cart_cc').html(data); }
});
});
}
</script>
<span style='float: left;'>Coupon: <input type='text' id='coupon' size=15/> <input type='button' value='Add' onclick='add_coupon();' class='btnGreenCSS'/></span>