ajax成功后如何将div改为另一个？

<script>
    $(document).ready(function(){
       $(".add_friend").click(function(){
           f_id = this.id;
           user_id = <?php echo $_SESSION['user_id']; ?>;
           $.ajax({
              type:"POST",
              data:{"f_id":f_id,"user_id":user_id},
              url:"request_send.php",
              success:function(data){
                  $("#add").css("display","none");
                  $(".friend").css("display","block");
              }
           });
       });
    });
</script>

<div class="profile_btnn" id="add" style="display:block;">
    <button type="submit" name="add_friend" id="<?php echo $row_add['user_id']; ?>" class="btnplus add_friend"><i class="fa fa-plus"></i>&nbsp;Add Friend</button>
</div>
<div class="friend" style="display:none;">
    <div class="profile_btnn set_btn">
        <button type="submit" name="req_sent" id="<?php echo $row_req['f_id']; ?>" class="btnplus req_sent"><i class="fa fa-plus"></i>&nbsp;Request Sent</button>
    </div>
</div>

In this code. I want to change div i.e. id="add" with class="friend" after ajax success. Now, What happens when I click on add_friend it works successfully and change id="add" with class="friend". But the problem is when I refresh the page it again show me add friend. So, How can I fix this issue? Please help me.

Thank You