checked and unchecked option for selected items?

Question

Hi Team

I have check box for items got price range, the issue is the other selected catetory is not independent it affects other category. For instance when checked box for price range is select and unchecked it also hides instead to function on its own. How can i prevent this from happening?

<pre><!-- Price Start -->
                <div class="border-bottom mb-4 pb-4">
                    <h5 class="font-weight-semi-bold mb-4">Filter by price</h5>
                    <form>
                        <div class="custom-control custom-checkbox d-flex align-items-center justify-content-between mb-3">
                            <input type="checkbox" class="custom-control-input" checked id="price-all">
                            <label class="custom-control-label" for="price-all">All Price</label>
                            1000
                        </div>
                        <div class="custom-control custom-checkbox d-flex align-items-center justify-content-between mb-3">
                            <input type="checkbox" class="custom-control-input" id="price-1">
                            <label class="custom-control-label" for="price-1">R0 - R100</label>
                            150
                        </div>
                        <div class="custom-control custom-checkbox d-flex align-items-center justify-content-between mb-3">
                            <input type="checkbox" class="custom-control-input" id="price-2">
                            <label class="custom-control-label" for="price-2">R100 - R200</label>
                            295
                        </div>
                        <div class="custom-control custom-checkbox d-flex align-items-center justify-content-between mb-3">
                            <input type="checkbox" class="custom-control-input" id="price-3">
                            <label class="custom-control-label" for="price-3">R200 - R300</label>
                            246
                        </div>
                        <div class="custom-control custom-checkbox d-flex align-items-center justify-content-between mb-3">
                            <input type="checkbox" class="custom-control-input" id="price-4">
                            <label class="custom-control-label" for="price-4">R300 - R400</label>
                            145
                        </div>
                        <div class="custom-control custom-checkbox d-flex align-items-center justify-content-between">
                            <input type="checkbox" class="custom-control-input" id="price-5">
                            <label class="custom-control-label" for="price-5">R400 - R500</label>
                            168
                        </div>
                    </form>
                </div>
                <!-- Price End -->

<pre lang="Javascript">$(document).ready(function() {
  // Price checkboxes change event
  $('input[type=checkbox][id^=price]').change(function() {
    var $allCheckbox = $('#price-all');
    var $checkedCheckboxes = $('input[type=checkbox][id^=price]:checked');
    var $products = $('ul#product-list').find('li');
    
    if ($checkedCheckboxes.length > 0 && !$allCheckbox.is(':checked')) {
      $products.hide();
      $checkedCheckboxes.each(function() {
        var price = $(this).attr('id').split('-')[1];
        $products.filter('[data-price="' + price + '"]').show();
      });
    } else if (!$allCheckbox.is(':checked')) {
      $products.hide();
    } else {
      $products.show();
    }
  });
  
  // Price all checkbox click event
  $("#price-all").click(function() {
    if($(this).is(':checked')) {
      $(".custom-checkbox .badge").show();
    } else {
      $(".custom-checkbox .badge").hide();
    }
  });
});