Show/hide div with jQuery and AJAX not working properly

Show/hide div with jQuery and AJAX not working properly

I'm trying to show a specific div depending on the result of a SQL query.
My issue is that I can't get the divs to switch asynchronously. Right now
the page needs to be refreshed for the div to get updated.
<?php
//SQL query
if (foo) {
?>
<div id="add<?php echo $uid ?>">
<h2><a href="#" class="plus" ?>">Add to list!</a></h2>
</div>
<?php
} else {
?>
<div id="remove<?php echo $uid ?>">
<h2><a href="#" class="minus" ?>">Delete!</a></h2>
</div>
<?php
}
<?
<script type="text/javascript">
//add to list
$(function() {
$(".plus").click(function(){
var element = $(this);
var I = element.attr("id");
var info = 'id=' + I;
$.ajax({
type: "POST",
url: "ajax_add.php",
data: info,
success: function(data){
$('#add'+I).hide();
$('#remove'+I).show();
}
});
return false;
});
});
</script>
<script type="text/javascript">
//remove
$(function() {
$(".minus").click(function(){
var element = $(this);
var I = element.attr("id");
var info = 'id=' + I;
$.ajax({
type: "POST",
url: "ajax_remove.php",
data: info,
success: function(data){
$('#remove'+I).hide();
$('#add'+I).show();
}
});
return false;
});
});
</script>
ajax_add.php and ajax_remove.php only contain some SQL queries.
What is missing for the div #follow and #remove to switch without having
to refresh the page?