JQuery: Checkbox won't stay Checked when toggling between buttons

I admit, still a noobie at jquery and I have a page with a total of 12 buttons / toggles (only 3 is shown as example) , which when clicked each one will pull up a php page with it set of checkboxes listed with products within a div on the advance search page. Since there are alot of information between each checkbox list, it slows the system down so I had to create an event when clicked it pulls that checkbox information when needed from another php page. Problem is... the checkboxes won't stay check when I toggle between the buttons. I have tried to a fuction where it sets the localstorage item when checked but doesn't seem to work. In so, need you help on how to make the checkboxes stay checked when going back to through each button / toggle.

So is there a way that will keep my checkboxes checked when toggleing? And How (please use code examples)

Is there a better way I could do to make this work more efficiently, so it will load the page faster? If so, How? (please use code examples)

KITE_PAGE.PHP (works the same for ball, hula hoop and other products)

     <div>
        <input type="checkbox" class="product_chkKite101" name="product_chk" value=" Like Kite 101 " /><label >Like USA Kite</label>
        <input type="checkbox" class="product_chkKite102" name="product_chk" value=" Like Kite 102 " /><label >Like Mexico Kite</label>
        <input type="checkbox" class="product_chkKite103" name="product_chk" value=" Like Kite 103 " /><label >Like Canada Kite</label>
    </div>

NOTLIKE_KITE_PAGE.PHP (works the same for ball, hula hoop and other products)

     <div>
        <input type="checkbox" class="product_chkKite101" name="product_chk" value=" Not Like Kite 101 " /><label >Not Like USA Kite</label>
        <input type="checkbox" class="product_chkKite102" name="product_chk" value=" Not Like Kite 102 " /><label >Not Like Mexico Kite</label>
        <input type="checkbox" class="product_chkKite103" name="product_chk" value=" Not Like Kite 103 " /><label >Not Like Canada Kite</label>

    </div>

Advance Search Page:

Html from Advance Search page

Buttons (again only three is shown):

    <ul class="category">
        <li><a href="#kite" class="category-btn kite-btn">KITES</a></li>
        <li><a href="#ball" class="category-btn ball-btn">BALLS</a></li>
        <li><a href="#hoop" class="category-btn hoop-btn">HULA HOOPS</a></li>
    </ul>

The Div where the pages will load into:

    <div id="product_container" >
        <div class="kite box" >
            <div class="tx-row" id='kite-in' >

            </div>
            <div class="tx-row"  id='kite-x' >

            </div>
        </div>
        <div class="ball box" >
            <div class="tx-row" id='ball-in' >

            </div>
            <div class="tx-row"  id='ball-x' >

            </div>
        </div>
        <div class="document box" >
            <div class="tx-row" id='hoop-in' >

            </div>
            <div class="tx-row"  id='hoop-x' >

            </div>
        </div>
    </div>

JQuery that retrieves the information when button is clicked

    $(document).ready(function(){   
        var $content = $('.box');
        function showContent(type) {
            $content.hide().filter('.' + type).show();
        }

        $('.category').on('click', '.kite-btn', function(e) {
            if ($('#kite-in').is(':empty')){                                                                                                
                showContent(e.currentTarget.hash.slice(1));
                e.preventDefault();
            }else {                                                     
                $("#kite-in").load("/wp-content/themes/child/kite_page.php");
                $("#kite-x").load("/wp-content/themes/child/notlike_kite_page.php");                                        
                showContent(e.currentTarget.hash.slice(1));
                e.preventDefault();
            }
        }); 
        $('.category').on('click', '.ball-btn', function(e) {
            if ($('#ball-in').is(':empty')){                                                                                                
                showContent(e.currentTarget.hash.slice(1));
                e.preventDefault();
            }else {                                                     
                $("#ball-in").load("/wp-content/themes/child/ball_page.php");
                $("#ball-x").load("/wp-content/themes/child/notlike_ball_page.php");                                        
                showContent(e.currentTarget.hash.slice(1));
                e.preventDefault();
            }
        });
        $('.category').on('click', '.hoop-btn', function(e) {
            if ($('#hoop-in').is(':empty')){                                                                                                
                showContent(e.currentTarget.hash.slice(1));
                e.preventDefault();
            }else {                                                     
                $("#hoop-in").load("/wp-content/themes/child/hoop_page.php");
                $("#hoop-x").load("/wp-content/themes/child/notlike_hoop_page.php");                                        
                showContent(e.currentTarget.hash.slice(1));
                e.preventDefault();
            }
        });
        $(".box").hide();
    });

An Additional Question to this as well: Is there a way to disable a checkbox with same class (example: class="product_chkKite101" ) when one is checked between pages?