Как найти 2 динамически создаваемых класса div

Question

Мне нужно динамически создать 2 div в разных местах. Первое место - это место, где вы видите информацию, а второе - место, где вы редактируете информацию, и я хочу с помощью delete удалить оба элемента div с одним и тем же классом.

Я не могу использовать ближайший родительский элемент, поскольку они размещеныв разных местах в дом.

<div class="cart">

<div class="top-section"></div>
<div class="bottom-section"></div>

<input type="button" class="add_btn" value="Add fields" />
</div>

/*This is how i add fields*/
let id = 0;
let something = 'Some info inside';
id++;
$('.add_btn').on('click', function(e) {
    $('.top-section').append('<div class ="wrapper_section_'+id+'"><span>'+something+'</span><div class="delete">X</div></div>');
    $('.bottom-section').append('<div class="wrapper_section_'+id+'"><span>'+something+'</span></div>');
});

/*And with this i only delete wrapper-in-header class*/
$(.cart).on("click", ".delete", function(e) {
    $(this).parent('div').parent('div').remove();
    x--;
    $(.some_div).trigger('change');
});

Как я могу удалить оба div одновременно?

Пожалуйста, проверьте скрипку: https://jsfiddle.net/pnL9wugo/

/*And the issue what i currently have if i call .closest it give me undefined*/
$(.cart).on("click", ".delete", function(e) {
    $(this).parent().remove();
  var className = $(this).parent('div').parent().attr('class');
   $(this).closest('.cart').find('.bottom-section').children(className ).remove();
    x--;
});

Answer 1

Добавьте тот же идентификатор для удаления данных div класса, как это

<div class="delete" data-id="'+id+'">X</div>

, вы можете найти div и удалить сейчас

var idDiv=$(this).data("id")
$(".wrapper_section_'+idDiv+").remove();

Answer 2

@ Даниэль, почему бы просто не использовать отдельный класс div или даже идентификаторы?

Answer 3

Просто дайте 2 делителям дополнительный класс, чтобы вы могли их идентифицировать.

Вот так:

$('.add_button').on('click', function(e) {
$('.wrapper-in-header').append('<div class="wrapper_section_'+id+' wrapper_section"></div><div class="delete">X</div>');
$('.wrapper-in-footer').append('<div class="wrapper_section_'+id+' wrapper_section"></div>');
});

И они удалят их вот так:

$('.some_div').on("click", ".delete", function(e) {
    $('.wrapper_section').remove();
    x--;
    $(.some_div).trigger('change');
});