How to retrieve the respective value from the checkbox to display in the div based on search text?

I have a searchbar, 2 divs that will display the id and brand name, and 2 checkboxes.

I want to retrieve brand data according to search, if I search for “Nike” then the brand-id and brand-name divs will display the brand name and id based on the checkbox below. And the checkbox below it is ticked. I’ve coded like below, but when I debug to get the brand name it merges “nikebrand”, so when I do a conditioning it doesn’t work

$('.search-brand').on('keyup keypress',function(){
  const brandFilterEl = $(".filter-item .filter-label")
  
  brandFilterEl.each(function(){
    const brandValues = brandFilterEl.text().toLocaleLowerCase()
    console.log(brandValues)
    
    if($('.search-brand').val() === brandValues){
      const valFilterBrand = brandFilterEl.siblings().attr('value')
      console.log(valFilterBrand)
      $('.brand-id').text(valFilterBrand)
      $('.brand-name').text(brandValues)
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="search-brand" style="margin-bottom:20px;">

<div class="brand-id"></div>
<div class="brand-name"></div>

<li class="filter-item" style="padding-left: 20px; font-size: 12px; padding-bottom: 0; border: none;">
   <input type="checkbox" name="brandIds" value="3" style="margin-right: 5px"> <span class="filter-label">Nike</span>
</li>
<li class="filter-item" style="padding-left: 20px; font-size: 12px; padding-bottom: 0; border: none;">
  <input type="checkbox" name="brandIds" value="2" style="margin-right: 5px"> <span class="filter-label">Adidas</span>
</li>