How to create an array in jquery when checkbox is clicked ?

I have a checkbox for brands and a check box for prices. Now if a user clicks on the check box I want an array of brand_ids and an array of prices.

<div class="left-filters__inner--block">
                                <ul class="filter-data filter-data-brands" id="brands_list">
                                    @foreach(App\Brand::all() as $brand)
                                        <li>
                                            <label for="{{$brand->name}}" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
                                                    <input type="checkbox" name="brands[]" id="{{$brand->name}}" class="mdl-checkbox__input"  data-value="{{$brand->id}}">
                                                    <span class="mdl-checkbox__label">{{$brand->name}}</span>                       
                                            </label>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>

price view with checkbox

<div class="left-filters__inner--block">
                                <ul class="filter-data filter-data-price" id="price_list">

                                    <li>
                                        <label for="less-20" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
                                            <input type="checkbox" id="less-20" class="mdl-checkbox__input" name="price" data-value="0,20">
                                            <span class="mdl-checkbox__label">Less than 20</span>
                                        </label>
                                    </li>
                                    <li>
                                        <label for="21-50" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
                                            <input type="checkbox" id="21-50" class="mdl-checkbox__input" name="price" data-value="21,50">
                                            <span class="mdl-checkbox__label">21  -  50</span>
                                        </label>
                                    </li>
                                    <li>
                                        <label for="51-100" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
                                            <input type="checkbox" id="51-100" class="mdl-checkbox__input"  name="price" data-value="51,100">
                                            <span class="mdl-checkbox__label">51  -  100</span>
                                        </label>
                                    </li>

Now when user clicks on the checkbox a particular brand or price I want an array which looks like this.

Array
    (
        [brand_id] => Array
        (
            [0] => 1
            [1] => 2
            [2] => 3
        )

        [price] => Array
        (
            [0] => 0,1000
            [1] => 1000,2000
        )

    )

I want to achieve this using jquery. Please assists