How to implement different sliding panels when clicking on an image?

Question

css

When you click on the image, panels pop up on both sides. How to make different blocks when clicking on different pictures, example . I can only get it when I click on the first image, I'm not good at JS





JS

$('.open-content').click(function() 
{
        if(!$('.portfolio__item').hasClass('open-box'))
        {
            $('.portfolio__item').addClass('open-box');
            $('.block-3').addClass('open-box');
            setTimeout(function(){$('.block-4').addClass('open-box')}, 100);
            setTimeout(function(){$('.portfolio-closebutton').addClass('open-box')}, 500);
            
        }
        else
        {
            $('.portfolio__item').removeClass('open-box');
            setTimeout(function(){$('.block-3').removeClass('open-box')}, 300);
            setTimeout(function(){$('.block-4').removeClass('open-box')}, 300);
            setTimeout(function(){$('.portfolio-closebutton').removeClass('open-box')}, 600);
        }
});