Алексей Веснин

OlegGazmanov, Первое что приходит в голову, так это что у тебя не правильно написан JS код.

$("body").on("click","#delete",function(e){

Здесь ты кликаешь по записи, если записей на странице много, то ID на странице одинаковых не может быть много, соответственно у всех записей должен быть класс .delete

Второй момент

var id = $(this).attr('data-id');

Скорее всего у каждой записи в цикле в атрибуте data-id ты присваиваешь реальный ID записи, например:

$post->id

Затем в переменную JS var id сохраняешь ID записи по которому кликнули, но потом:

url: "{{route('deletePost',['id' => $post->id])}}",

Передаешь не ID JS, который получил, а php $post->id, соответственно вопрос, у тебя на странице скрипт выводится и плодится тоже в цикле? тогда это не правильно, сюда нужно передавать ID элемента по которому кликнули, соответственно на JS (var id )

Ну и здесь:

success: function (response){
                        $("#deletePost").html(response.message);
                    }

Здесь у тебя выведется инфа о том, что пост удален, а запись на странице останется, соответственно ее так-же нужно удалять на странице remove() через JS, это первое, что пришло в голову пересмотри сам скрипт

в url лучше формируй прямую ссылку на удаление записи(строкой).

Нашел решение, необходимо сделать так:

(() => {

var foo = function() {


    var targetblock = document.getElementById('targetblock');

    targetblock.insertAdjacentHTML("beforeend", "<div id='lumos-container'><span id='lumos-close' style='position: absolute; right: 15px; top: 15px; padding: 10px 15px; background: #ededed; border-radius: 5px; color: #666;'>Закрыть</span><img src='' id='lumos-image'></div>");
    
    const lummContainer = document.getElementById('content'); // добавил контейнер

    const lumosContainer = document.getElementById('lumos-container');
    const lumosImage = document.getElementById('lumos-image');
    const elements = document.querySelectorAll('[data-action="lumos"]');
    const transitionSpeedInMilliseconds = 250;

    window.addEventListener('keyup', (event) => {
        if (event.key === 'Escape') {
            hideLumos();
        }
    });

    // elements.forEach((element) => {
    //     element.addEventListener('click', () => {
    //         handleElementClick(element);
    //     });
    // });

    lummContainer.onclick = (e) => {
   var target = e.target; // элемент который вызвал событие
   var action = target.dataset.action;

   if (action == 'lumos') {
        handleElementClick(target);
      }
}



    lumosContainer.addEventListener('click', hideLumos);

    function handleElementClick(htmlElement) {
        updateLumosImage(getImageUrl(htmlElement));
        showLumos();
    }

    function getImageUrl(htmlElement) {
        return htmlElement.attributes['data-lumos-src'] === undefined
            ? htmlElement.attributes['src'].value
            : htmlElement.attributes['data-lumos-src'].value;
    }

    function updateLumosImage(imageUrl) {
        lumosImage.attributes['src'].value = imageUrl;
    }

    function showLumos() {
        if (!lumosContainerIsVisible()) {
            lumosContainer.classList.remove('hidden');
            lumosContainer.classList.add('visible');
        }
    }

    function hideLumos() {
        if (lumosContainerIsVisible()) {
            lumosContainer.classList.add('hidden');

            setTimeout(() => {
                lumosContainer.classList.remove('visible');
                lumosContainer.classList.remove('hidden');
                lumosImage.attributes['src'].value = '';
            }, transitionSpeedInMilliseconds);
        }
    }

    function lumosContainerIsVisible() {
        return lumosContainer.classList.contains('visible');
    }

};

document.addEventListener("DOMContentLoaded", function(event) {
foo();
console.log("Загрузка DOMContentLoaded произошла!");
  });
   
    

})();