i am having issue with showing data using jquery slice() and show() method to show resulting dynamic divs from php method. the code is below:

<style>
.hide-show
{
 display :none;
}
</style>
<div class="col-sm-6 col-md-3 hide-show">
<!--- rest of the code-->


</div>
<div class="col-sm-6 col-md-3 hide-show">
<!--- rest of the code-->


</div>
<div class="col-sm-6 col-md-3 hide-show">
<!--- rest of the code-->


</div>
<div class="col-sm-6 col-md-3 hide-show">
<!--- rest of the code->


</div>
<div class="col-sm-6 col-md-3 hide-show">
<!--- rest of the code-->


</div>
<div class="col-sm-6 col-md-3 hide-show">
<!--- rest of the code-->


</div>

.
.
.
.
..
and so on 

<div class="mt2 text-center load-more-btn" ">
                    <a href="javascript:void(0);" class="btn btn-blank btn-sm-width"><?php echo lang('store load more'); ?></a>
                </div>

<script>
$('.hide-show').slice(0,12).show();
 $(".load-more-btn a").click(function () {
            
              $('.hide-show:hidden').slice(0,12).show();
             
             if($('.hide-show:hidden').length == 0 )
             {
                 $(".load-more-btn a").fadeOut();
             }
        });



</script>

on initial page load it's not showing first 12 divs, which it should show , but on click its starting with first 12 divs and on words it works perfectly. can anyone please help me with this issue , sorry for my bad writing.