попытка удалить первый добавленный div с помощью кнопки также удаляет второй добавленный div в jquery

Question

Учтите, что в главном div есть 2 добавленных div.Когда я пытался удалить первый добавленный div с помощью кнопки «revoke», он сначала удаляет второй добавленный div.Затем, если снова нажать кнопку отзыва на первом div, он удаляет первый div.

Мне нужно удалить первый div при нажатии кнопки отзыва, когда внутри основного div есть два добавленных 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>

Answer 1

Вместо жесткого кодирования идентификатора в кнопке используйте делегирование и навигацию с помощью селекторов - например,

$('#display_session').on("click",".deleteButton",function(e) { 
  e.preventDefault(); 
  post_fun(this);
});

с использованием

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();
    }
  });
}