While I have successfully implemented the filtering of the product list based on store and brand in my code, I am facing challenges in filtering it with price range.

<div id="prod">
    <div class="content" data-brand="Andrew" data-price="1000" data-store="JCPenny">Andrew</div><br />
    <div class="content" data-brand="Hill" data-price="4300" data-store="JCPenny">Hill</div><br />
    <div class="content" data-brand="Andrew" data-price="1600" data-store="JCPenny">Andrew</div><br />
    <div class="content" data-brand="Hill" data-price="800" data-store="SuperMart">Hill</div><br />
    <div class="content" data-brand="Hill" data-price="2300" data-store="SuperMart">Hill</div><br />
    <div class="content" data-brand="Andrew" data-price="800" data-store="JCPenny">Andrew</div><br />
    <input type="checkbox" class="brand" id="Andrew" />Andrew
    <input type="checkbox" class="brand" id="Hill" />Hill
    <input type="checkbox" class="store" id="JCPenny" />JCPenny
    <input type="checkbox" class="store" id="SuperMart" />SuperMart
    <input type="radio" name="range" class="price" id="0-ALL"/>All
    <input type="radio" name="range" class="price" id="0-2000"/>Rs.0-2000
    <input type="radio" name="range" class="price" id="2000-4000"/>Rs.2000-4000
    <input type="radio" name="range" class="price" id="4000-6000"/>Rs.4000-6000
    <input type="radio" name="range" class="price" id=">6000"/>Rs.>6000
</div>

Above is the layout of my div. Here, I am outlining the JavaScript code for the filtering logic which has been implemented for brand and store with the assistance of my friend.

<script>
var a=$("input.brand");
var b=$("input.store");
var brand=new Array();
var store=new Array();
$("input[name=range]").change(function (e) {

alert("range");
    var toggle = this.checked;
    var range = this.value.split('-');
    var rangeFrom = parseInt(range[0]);
    var rangeTo = parseInt(range[1]);
    $(".container >div[data-price]").each(function(){
        var $this = $(this);
        // Check if category is active
        var categoryActive = $("#" + $this.data("brand")).prop("checked");
        // Get price as number
        var price = parseFloat($this.data('price'));
        // Toggle visibility based on category and price range
        $this.toggle(price >= rangeFrom && price <= rangeTo && categoryActive );
    });
});
$('input[type="checkbox"]').change(function(){
    if($(this).is(":checked")){
        $('#prod >div').hide();
        if(this.className == "brand"){
            console.debug("brand checked");
            brand.push($(this).attr('id'));
        }else if(this.className == "store"){
            console.debug("store checked");
            store.push($(this).attr('id'));
        }
        console.log(brand+","+store);
        displaydivs(brand,store);
    }else{
        $('#prod >div').show();
        if(this.className == "brand"){
            var index = brand.indexOf($(this).attr('id'));
            if (index > -1) {
                brand.splice(index, 1);
            }       
        }else if(this.className == "store"){
            var index = store.indexOf($(this).attr('id'));
            if (index > -1) {
                store.splice(index, 1);
            } 
        }
        displaydivs(brand,store);
    }     
});


function displaydivs(brand,store)
{
    $("#prod >div").hide();
    if(brand.length > 0 & store.length > 0){ 
        $.each(brand, function( index, value ){
            var temp = $("#prod >div[data-brand="+value+"]")[0];
            var data = $(temp).attr("data-store");
            var idx = store.indexOf(data);
            if(idx > -1){
              $("#prod >div[data-brand="+value+"][data-store="+data+"]").show();
          }            
      });  
        $.each(store, function( index, value ){
            var temp = $("#prod >div[data-store="+value+"]")[0];
            var data = $(temp).attr("data-brand");
            var idx = brand.indexOf(data);
            if(idx > -1){
              $("#prod >div[data-brand="+data+"][data-store="+value+"]").show();
          }            
      });
    }
    else if(brand.length > 0 & !(store.length > 0)){ 
        $.each( brand, function( index, value ){
            $("#prod >div[data-brand="+value+"]").show();
        });
    }
    else if(!(brand.length > 0) & store.length > 0){ 
        $.each( store, function( index, value ){
            $("#prod >div[data-store="+value+"]").show();
        });
    }else{
        $("#prod >div").show();
    }
}
</script>

Although the code works effectively for store and brand filters, I am now seeking assistance on implementing price range filtering. My specific requirement is as follows:

Upon selecting a brand (e.g., Andrew) and a store (e.g., JCPenny) from the checkbox list, only the divs containing both data-brand=andrew and data-store=JCPenny should be displayed. Furthermore, upon selecting a price range filter (e.g., 2000-4000), only those divs with data-brand Andrew, data-store JCPenny, and price within the specified range should be shown.

I kindly request guidance on how to enable price filtering on this product list. Any assistance would be greatly appreciated.