Replace select with jQuery

Replace select with jQuery

I'm trying to replace a select element. However, instead of replacing the
select with id "Base" a new select is generated within that select with
the same ID. The relevant parts of my code are below. What part do you
think is generating the duplicate select? The problem can be seen at this
site when searching. http://bahcalculator.org/nano/
<select class="base" id="Base" onChange="codeAddress2();">
<option>Select State First...</option>
</select>
function getbases2(){
var S=$('#search').val();
$.post("getbases2.php", {S:S},
function(data) {
$('#Base').html(data);
});
}
//getbases2.php
$S=$_POST['S'];
$re=mysql_query(" SELECT * FROM state_bases WHERE Base='$S' ");
$ro=mysql_fetch_assoc($re);
extract($ro);
echo "
<select class='base' id='Base' onchange='codeAddress2();'>
<option>Select base</option>
";
$re=mysql_query(" SELECT Base FROM state_bases WHERE State='$State' ORDER
BY Base ASC");
while ($ro=mysql_fetch_assoc($re)){
extract($ro);
if ($Base!=""){
echo "
<option
";
if ($Base=="$S"){ echo "
selected='selected' ";}
echo "
>$Base</option>
";
}
}
echo "
</select>
<script type='text/javascript'>
$('#State').val('$State');
codeAddress2();
</script>
";