Q:

trying to delete the first appended div using button also deletes the second appended div in jquery

Consider there are 2 appended divs inside a main div. When I tried to remove the first appended div using revoke button it first removes the 2nd appended div. Then if again click revoke button on first div it removes the first div.  
I need to remove the first div on clicking the revoke button when there are two appended divs inside the main div.

$(document).ready(function() {
  var str = '';
  $("#session_button").click(function() {
    $.ajax({
      url: "/active_session",
      type: "GET",
      dataType: "json",
      success: function(data) {

        $(data).each(function(index, value) {
          str = ' ';
          str +=
            ("browser:" + " " + value.browser + "<br>" +
              "IP: " + " " + value.ip_address + "<br>" +
              "sign_in_time: " + " " + value.sign_in_time + "<br><br>");

          console.log(str);
          console.log(value.id)

          my_button = $('<button/>', {
            text: "revoke",
            id: 'btn_' + index,
            onclick: "post_fun('" + value.id + "', 'div" + index + "')"

          });
          my_div = $('<div id="div' + index + '" />');
          console.log(my_div);
          my_div.append(str);
          my_div.append(my_button)
          $('#display_session').append(my_div);
        });
      }
    });
  });
});

function post_fun(id_parameter, my_div) {
  console.log(id_parameter)
  $.ajax({
    type: "POST",
    url: "/revoke",
    data: JSON.stringify({
      id_param: id_parameter
    }),
    contentType: 'application/json;charset=UTF-8',
    success: function() {
      console.log(my_div);
      $("#" + my_div).remove();
    }
  });
}
<div class="row">
  <div class="column left" style="background-color:#aaa;">
    <div>
      <form name="twitt_form" action={{url_for( "posting_messsage", email=email)}} method="POST">
        <b style="font-size:124%" ;>TITLE</b>
        <hr>
        <br>
        <div class="dropdown" style="float:right;">
          <button class="dropbtn">Security</button>
          <div class="dropdown-content">
            <!--<a href="#" onclick="load_session()">Sessions</a>-->
            <a href="#" id="session_button">Sessions</a>
          </div>
        </div>
        <textarea rows="1" cols="20" name="your_title" id='your_title' value="" required></textarea> <br><br>
        <b style="font-size:124%" ;>WRITE YOUR POST</b>
        <hr>
        <br>
        <textarea name="title" id='title' value="" required></textarea> <br><br>
        <br>
        <button type="submit" class="button"><b style="font-size:124%" ;>POST</b></button>
      </form>
      <br><br><br><br>
    </div>
    <div id="lower_part">
      <b style="font-size:124%" ;>RECENTPOST</b> <br>
      <hr>
      <br> {% for post in retrieved_post: %}
      <ul><b>Title and Post</b>
        <li>{{post.Title}}</li>
        <li>{{post.MyPost}}</li>
      </ul>
      {% endfor %}
      <br><br>
      <button class="delete_button"><b style="font-size:124%" ;>Delete</b></button>
      <form action={{url_for( "logout")}} method="post">
        <input type="submit" name="logout" class="logout_button" id="logout" value="Logout"> <b style="font-size:124%" ;></b> </input>
      </form>
    </div>

  </div>
  <div class="column right" id="display_session" style="background-color:#bbb;">
  </div>
</div>

A:

Instead of hardcoding the id in the button, use delegation and navigation using selectors - like 
$('#display_session').on("click",".deleteButton",function(e) { 
  e.preventDefault(); 
  post_fun(this);
});

using
my_button = $('<button/>', {
  text: "revoke",
  data - id: value.id
}).addClass("deleteButton")

function post_fun(but) {
  var $but = $(but);
  $.ajax({
    type: "POST",
    url: "/revoke",
    data: JSON.stringify({
      id_param: $but.attr("data-id")
    }),
    contentType: 'application/json;charset=UTF-8',
    success: function() {
      console.log(my_div);
      $but.closest("div").remove();
    }
  });
}

