Angular ngFor not working with mat-accordion

Question

Suppose the response of categoryFilters?.filter is :

HTML Code :

<div *ngFor="let item of categoryFilters?.filter; let i = index">
  <div
    class="FilterDirectory-titleBar"
  >
    <input
      type="text"
      id="searchInput"
      (input)="searchCategory()"
      class="FilterDirectory-searchInput"
    />
    <span class="close-search" (click)="item.showSearch = false"
      ><i class="fa fa-times" aria-hidden="true"></i
    ></span>
  </div>
  <div class="card product-list-header" style="border: none">
    <span class="open-search" (click)="item.showSearch = true">
      <i class="fa fa-search"></i>
    </span>
  <mat-accordion class="filter-product-expansion">
      <mat-expansion-panel [expanded]="true">
        <mat-expansion-panel-header
          style="background-color: #fff"
        >
          <h5
            class="float-left"
          >
            {{ item.title }}
          </h5>
        </mat-expansion-panel-header>
        <span class="clearfix"></span>
        <ul id="searchUL">
          <div *ngFor="let items of item.value; let i = index">
            <li *ngIf="items.active">
              <a class="search-title">{{ items.title }}</a>
              <div
                class="card-body"
              >
                <div class="form-group">
                  <div class="row">
                    <div
                      class="col-md-10 filter-col"
                      style="padding: 0"
                    >
                      <label class="radio-inline">
                        <p-checkbox
                          name="item.title"
                          value="{{ items?.uuid }}"
                          label="{{ items?.title }}"
                        >
                        </p-checkbox>
                      </label>
                    </div>
                    <div class="product-count">
                      <p>
                        ({{
                          items.productCount
                            ? items.productCount
                            : ""
                        }})
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </div>
        </ul>
      </mat-expansion-panel>
    </mat-accordion>

Code in TS file :

searchCategory() {
    var input, filter, ul, li, a, i, txtValue;
    input = document.getElementById('searchInput');
    filter = input.value.toUpperCase();
    ul = document.getElementById('searchUL');
    li = ul.getElementsByTagName('li');
    for (i = 0; i < li.length; i++) {
      a = li[i].getElementsByTagName('a')[0];
      txtValue = a.textContent || a.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        li[i].style.display = '';
      } else {
        li[i].style.display = 'none';
      }
    }
  }

In this below part of the code :

ul = document.getElementById('searchUL');

I am not getting the complete list of item names.

To be more precise, based on the 3 objects (in filter array) as shown in the above image, 3 separate filters are created with a search bar in each.

But if I try to search the value in the "Categories" section, the search is not working because searchUL contains only the value of "Manufacturer".

The values of only the first array (i.e Manufacturer) are coming in searchUL. The values are not looping correctly.

Can anyone please help me resolve this issue ?