title: How to change div to another after ajax success?
body: <pre><code>&lt;script&gt;
      $(document).ready(function(){
         $(".add_friend").click(function(){
             f_id = this.id;
             user_id = &lt;?php echo $_SESSION['user_id']; ?&gt;;
             $.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");
                }
             });
         });
      });
  &lt;/script&gt;
  
  &lt;div class="profile_btnn" id="add" style="display:block;"&gt;
      &lt;button type="submit" name="add_friend" id="&lt;?php echo $row_add['user_id']; ?&gt;" class="btnplus add_friend"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt;&amp;nbsp;Add Friend&lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="friend" style="display:none;"&gt;
      &lt;div class="profile_btnn set_btn"&gt;
          &lt;button type="submit" name="req_sent" id="&lt;?php echo $row_req['f_id']; ?&gt;" class="btnplus req_sent"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt;&amp;nbsp;Request Sent&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In this code. I want to change div i.e. <code>id="add"</code> with <code>class="friend"</code> after ajax success. Now, What happens when I click on <code>add_friend</code> it works successfully and change <code>id="add"</code> with <code>class="friend"</code>. But the problem is when I refresh the page it again show me <code>add friend</code>. So, How can I fix this issue? Please help me.</p>
  
  <p>Thank You</p>