Jquery accordion does not collapse

the issue I encounter is a Jquery accordion which does not collapse anymore after I have invoked an AJAX request. The testpage (index.php) I created has 2 main items called Header 1 and Header 2. Header 1 had 4 subitems called item 1...4 - Header 2 has also 4 subitems called item 5...8.

When clicking the Header items, the accordion opens up and the sub-items appears, so far so good. Once the header-item is clicked an AJAX GET request is launched towards a second page which is called get_data.php. On that page, I get all the data I need to fill in into a DIV on my index.php page with the ID responsecontainer. As such I can get data without posting on my initial page.

the issue I encounter is that - once the data is displayed on the index.php page - I'm not able anymore to close the Header items of the accordion

A test can be seen at this location : https://smultocht.be/test/

This is how the accordion looks :

<section class="hero">
        <div class="container">
            <div class="row">
                <div class="col-lg-3">
                        <div class="panel-group accordion" id="group_accordion">
                            <div class="panel panel-default">
                                   <!-- 1 -->
                                    <div class="panel-heading" style="border-width:0px;border-radius:5px; background-color:#CCC">
                                        <h4 class="panel-title" style="color:#FFF">
                                            <a class="main_item" data-toggle="collapse" data-parent="#accordion" href="#collapse1" id="1">header 1</a>
                                         </h4>
                                     </div>
                                     
                                     <div id="collapse1" class="panel-collapse collapse"> 
                                         <ul class="list-group">
                                               <li class="list-group-item">Item 1</li>
                                               <li class="list-group-item">Item 2</li>
                                               <li class="list-group-item">Item 3</li>
                                               <li class="list-group-item">Item 4</li>
                                         </ul>
                                     </div>
                                     
                                   <!-- 2 -->
                                    <div class="panel-heading" style="border-width:0px;border-radius:5px; background-color:#CCC">
                                        <h4 class="panel-title" style="color:#FFF">
                                            <a class="main_item" data-toggle="collapse" data-parent="#accordion" href="#collapse2" id="2">header 2</a>
                                         </h4>
                                     </div>
                                     
                                     <div id="collapse2" class="panel-collapse collapse"> 
                                         <ul class="list-group">
                                               <li class="list-group-item">Item 5</li>
                                               <li class="list-group-item">Item 6</li>
                                               <li class="list-group-item">Item 7</li>
                                               <li class="list-group-item">Item 8</li>
                                         </ul>
                                     </div>                                     
                            </div> 
                    </div> 
              </div>
                
                
                
                <div class="col-lg-9" style="border-color:#000; border-width:0px; border-style:solid;"> 
                    <div class="hero__search" >
                        <div class="hero__search__form">
                            <form action="#">

                                <input id="hello" type="text">
                                <button type="submit" class="site-btn">Zoek</button>
                            </form>
                        </div>
                        
                        <div class="hero__search__phone" >
                            <div class="hero__search__phone__icon">
                                <i class="fa fa-phone"></i>
                            </div>
                            <div class="hero__search__phone__text" style="padding-top:5px;">
                                <h4></h4>
                            </div>
                        </div>
                    </div>

                    <div class="hero__text" id="responsecontainer" style="border-color:#000; border-width:0px; border-style:solid;">
                          
                    </div>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

The AJAX request looks like this :

<script type="text/javascript">
$('.main_item').on('click', function () {
$id = ($(this).attr('id'));
$.ajax({    //create an ajax request 
        type: "GET",
        url: "gather_data.php?id="+$id,             
        dataType: "html",   //expect html to be returned                
        success: function(response){                    
        $("#responsecontainer").html(response); 
        }
    });
});
</script>

the get_data.php page looks like this :

<?php 
$group_item_nr = $_GET['id'];
?>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>  

   
<?   
$art_result = mysqli_query($_SESSION['db'], "SELECT * FROM artikel_tabel WHERE artikel_actief='1' AND artikel_hoofd_tabel_id = ".$group_item_nr." ORDER BY artikel_benaming ASC");
//Show all articles in responsecontainer on index.page      
$num_mysql_rows = mysqli_num_rows($art_result);
$counter = 0;
echo('<div class="set-bg row" style="border-color:#000; border-width:0px; border-style:solid; text-align:center;">');
    
while ($counter < $num_mysql_rows)
    {
        $art_array = mysqli_fetch_array($art_result);
        echo('
            <div class="art_item col-md-2 col-sm-3" id="'.$art_array['artikel_id'].'"
                 style="padding:2px; margin:5px; text-align:center; border-color:#CCC; border-width:1px; border-style:solid; position: relative;">
                    <img src="fotos_artikelen/'.$art_array['artikel_foto_url'].'">
                        &nbsp;<br>'.
                        utf8_decode($art_array['artikel_benaming']."<br>"."(".$art_array['artikel_hoeveelheid']." ".$art_array['artikel_eenheid']).')
                        '.$is_reclame_yes_no.'
                        </div>');
            $counter++; 
    }
echo('</div>'); 
?>
<body>
</body>

any help will be gratefull appreciated, txs