jQuery - how to close any open data-related items to open correct one?

Hello all,
I have written a piece of jquery like so:

$('.impact-item').on('click', function (e) {
            e.preventDefault();
            var id = $(this).attr('data-related');
            $(".impact-modal-box").each(function () {
                if ($(this).attr('id') == id) {                   
                    $('.impact-modal').addClass('active');                  
                    $(this).addClass('active');
                    $('.chart-impact').addClass('scaled-down');
                } else {
                    //console.log("no result");
                                      
                  
                  
                }
            });
            
        });
  
         $('.close').on('click', function (e) {
          
            $('.impact-modal').removeClass('active');
            $('.impact-modal-box').removeClass('active');
            $('.chart-impact').removeClass('scaled-down');
        });  

HTML:

<g id="g-biodiversity" class="impact-item" data-related="impact--1">
<g id="g-enerfy" class="impact-item" data-related="impact--2">
<g id="g-circular" class="impact-item" data-related="impact--3">

Code (markup):

What it does:
The class "impact-item" when clicked open a modal eg:
<div class="impact-modal-box biodiversity" id="impact--1">

IT works well, but when I am stuck in achieving is if we click on the second impact-item, it closes any opened and open the correct one....not sure if that is clear though.

Can we use siblings in this case?
Any help will be appreciated. Many thanks.

Sam.

 

This is an old post, but what are you trying to do?