php - jQuery/Ajax - Follow/Unfollow button, repeating functions -

i trying create follow/unfollow button can function both ways repetitively without needing refresh page. functions in sense if click "follow", adds follow data database via php file , shows "unfollow" button in it's place , vice versa, fine. however, once shows opposite button, cannot click until refresh page? how can make each function work each button simultaneously in way intend?

jquery/ajax:

<script> $(function() { $(".followuser").click(function()  { var userid = $(this).attr("id"); var datastring = 'userid='+ userid ; var parent = $(this);  $("#followbutton").fadeout(300); $.ajax({ type: "post", url: "follow.php", data: datastring, cache: false,  success: function(html) { $("#followbutton").html('<button id="' +userid '" name="unfollow" class="btn btn-danger unfollowuser">unfollow</button>'); $("#followbutton").fadein(300);  }  }); return false;  }); });  $(function() { $(".unfollowuser").click(function()  { var userid = $(this).attr("id"); var datastring = 'userid='+ userid ; var parent = $(this);  $("#followbutton").fadeout(300); $.ajax({ type: "post", url: "unfollow.php", data: datastring, cache: false,  success: function(html) { $("#followbutton").html('<button id="' +userid '" name="follow" class="btn btn-info followuser">follow</button>'); $("#followbutton").fadein(300);  }  }); return false;  }); }); </script> 

html:

<div id="followbutton">      //if isn't following     <button id="1" name="follow" class="btn btn-info followuser">follow</button>      //if following     <button id="1" name="unfollow" class="btn btn-danger unfollowuser">unfollow</button>  </div> 

on document load set button click functions on buttons generated php script.

but on ajax success replacing content of #followbutton new button. previous .click lost.

you have several choices:

1. add onclick event after creating new button
2. simple use fadein / fadeout on follow/unfollow buttons