AJAX фильтр без перезагрузки страницы

<script>
 var arr = [];
 var butt_form = document.getElementsByClassName('my_no_botoon');
</script>

<?php
  
if( $ctype['options']['list_show_filter'] ) {
    $this->renderAsset('ui/filter-panel', [
        'css_prefix'   => $ctype['name'],
        'page_url'     => $page_url,
        'fields'       => $fields,
        'props_fields' => $props_fields,
        'props'        => $props,
        'filters'      => $filters,
        'ext_hidden_params' => $ext_hidden_params,
        'is_expanded'  => $ctype['options']['list_expand_filter']
    ]);
}
?>
<?php if (!$items){ ?>
 
    <p class=«alert alert-info mt-4 alert-list-empty»>
        <?php if(!empty($ctype['labels']['many'])){ ?>
            <?php echo sprintf(LANG_TARGET_LIST_EMPTY, $ctype['labels']['many']); ?>
        <?php } else { ?>
            <?php echo LANG_LIST_EMPTY; ?>
        <?php } ?>
    </p>
<?php return; } ?>

<?php $first_item = reset($items); ?>
<div class=«container»>
 <div class=«row»>
   <div class=«col-sm h-100 sticky-top order-2 order-sm-2 order-lg-2»>
 <!--  кнопка сформировать список  start --> 
<div style=«text-align:right;display:none;» class=«my_no_botoon»> 
 <form name=«send_mass_sotrud» method=«post» target="_blank" action="/list-person.html"> 
      <input type=hidden name='mass_list_sutrudnik' id=«id_input_form» value="">   
      <input type=«submit» value=«Сформировать документы» class=«btn btn-secondary»>
 </form> 
</div>
<?php 
var_dump(); 
?>
</div>
<!--  кнопка сформировать список end  -->

<div class=«col-sm-12 col-md-9 order-2 order-sm-2 order-lg-1»>
 
<div class=«content_list table <?php echo $ctype['name']; ?>_list table-responsive-md»>
    <table class=«table table-hover»>        
        <tbody>
        <?php foreach($items as $item){ ?> 
            <tr>
            <?php foreach($item['fields_names'] as $_field){ ?>
            <?php if ($_field['name'] != 'parent_company_id'){ ?>
                <td class=«align-middle field ft_<?php echo $_field['type']; ?> f_<?php echo $_field['name']; ?><?php if ($_field['label_pos'] === 'none') { ?> d-none d-lg-table-cell<?php } ?>»>
                    <?php if (!isset($item['fields'][$_field['name']])) { continue; } ?>
                    <?php $field = $item['fields'][$_field['name']]; ?>
                    <?php if ($field['name'] === 'title' && $ctype['options']['item_on']){ ?>
                        <h3 class=«h5 m-0»>                  
 <span class=«d-none d-md-inline-block»><?php html_svg_icon('solid', 'user'); ?></span>  
                        <a href="<?php echo href_to($ctype['name'], $item['slug'].'.html'); ?>">
                            <?php echo $item['lastname'] ;?>
 <?php html($item[$field['name']]); ?>
 <?php echo $item['surname'] ;?>
                        </a>
                        </h3>
                    <?php } else { ?>
 
                    <?php } ?>
                </td><?php } ?>
            <?php } ?>
            <?php if (!empty($item['info_bar'])){ ?>
                <td class=«align-middle d-none d-lg-table-cell»>
                    <div class=«info_bar»>
                        <?php foreach($item['info_bar'] as $bar){ ?>
                            <div class=«bar_item <?php echo !empty($bar['css'])? $bar['css']: ''; ?>» title="<?php html(!empty($bar['title'])? $bar['title']: ''); ?>">
                                <?php if (!empty($bar['icon'])){ ?>
                                    <?php html_svg_icon('solid', $bar['icon']); ?>
                                <?php } ?>
                                <?php if (!empty($bar['href'])){ ?>
                                    <a class=«stretched-link» href="<?php echo $bar['href']; ?>">
                                        <?php echo $bar['html']; ?>
                                    </a>
                                <?php } else { ?>
                                    <?php echo $bar['html']; ?>
                                <?php } ?>
                            </div>
                        <?php } ?>
                    </div>
                </td>
<!--    показываем кнопку добавить в список если есть сотрудники --> 
 <?php if (count($items) > 0) { ?>
 <td style=«width: 200px;text-align: center;»>
 <a href="#" id=«person_add<?php html($item['id']); ?>»>
 Добавить в список
 </a>
 </td>
 <?php } ?>
<!--    показываем кнопку добавить в список если есть сотрудники --> 
 
<script> 
 document.getElementById('person_add<?php html($item['id']); ?>').addEventListener('click', function (event) {
    event.preventDefault(); //отключает переход по ссылке
 
 if(this.innerHTML == '<?php html_svg_icon('solid', 'check'); ?>'){
 
 arr.forEach((item, index, array) => { 
  
 if (item == <?php html($item['id']); ?>) {arr.splice(index, 1);} // удаляем текущий id из массива
 if(arr.length == 0){butt_form[0].classList.remove(«d-block»);} //скрываем кнопку если массив пустой
 });

 console.log(arr); 
 this.innerHTML = 'Добавить в список';
 } else { 
 
 butt_form[0].classList.add(«d-block»); // показываем кнопку формирования документа
 arr.splice(0, 0, <?php html($item['id']); ?>); // добавляем текущий id в массив
 console.log(arr);
 //<?php $_SESSION['my_arr_new'] = html($item['id']); ?>
 //var sess = <?php echo $_SESSION['my_arr_new']; ?>;
 //console.log(sess);
 
    this.innerHTML = '<?php html_svg_icon('solid', 'check'); ?>';
 console.log(arr);
 var json_upload = JSON.stringify({arr});
 console.log(json_upload); 
 }
 
   // Получаем элемент input
      const myVarInput = document.getElementById('id_input_form');

      // Устанавливаем значение
   var json_upload2 = JSON.stringify({arr});
      myVarInput.value = json_upload2;

      // Отправляем форму на сервер
     // document.querySelector('form').submit;   
 
})

</script> 
            <?php } ?>
            </tr> 
        <?php } ?>
        </tbody>
    </table> 

<script>
   
</script>

</div>

</div>
<?php echo html_pagebar($page, $perpage, $total, $page_url, $filter_query); ?>