Как сменить div на другой после успеха ajax?

Question

<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>

В этом коде.Я хочу изменить div, то есть id="add" на class="friend" после успеха ajax.Теперь, что происходит, когда я нажимаю add_friend, он успешно работает и меняет id="add" на class="friend".Но проблема в том, что когда я обновляю страницу, она снова показывает мне add friend.Итак, как я могу исправить эту проблему?Пожалуйста, помогите мне.

Спасибо