Carregar mais Grid Portfolio

[kaiquemix 1]

Olá galera estou usando um plugim chamado ISOTOPE no meu Portfolio GRID porem não estou conseguinido fazer um botão onde vai me fazer carregar tantos GRIDS a cada vez que você aperta o botão.

 

Meu codigo (INDEX.PHP):

 

https://mega.nz/#!8JFFCYCZ!CYwirmZkcYK_sEppbQKpxeAXbxM91EtKpFp-hQqBtV4

 

Plugim Usado: (ISOTOPE)

 

http://isotope.metafizzy.co/

 

GRID ESCONDIDO:

  <div class="element-item grafico disnone tdmg card " data-category="transition">       <a href="#portfolioModal56" class="portfolio-link" data-toggle="modal">                                  <img src="images/port/mini/grafico/card/mini-mania.jpg" alt="project 2">           <div class="mask">    <div class="conteudo_mask" style="    transform: translateY(-50%);    top: 50%;    position: relative;    /* float: left; */    ">                   <h1>MANIA DE LANCHES</h1>                   <div id="lin" style="    width: 200px;"></div>                   <h2>CARDÁPIO</h2>                                                    </div><h3 style="    transform: translateY(-50%);    top: 50%;    position: relative;">VEJA <br><img src="images/mais.png" alt="mais" style="width: 20px;height: 19px;margin-bottom: -1px;margin-top: 3px;"></h3></div>                                </a>  </div>

JS:

  $(function(){                var $container = $('.grid'),                    colWidth = function () {                        var w = $container.width(),                             columnNum = 1,                            columnWidth = 0;                        if (w > 1200) {                            columnNum  = 6;                        } else if (w > 900) {                            columnNum  = 3;                        } else if (w > 600) {                            columnNum  = 2;                        } else if (w > 300) {                            columnNum  = 1;                        }                        columnWidth = Math.floor(w/columnNum);                        $container.find('.element-item').each(function() {                            var $item = $(this),                                multiplier_w = $item.attr('class').match(/item-w(\d)/),                                multiplier_h = $item.attr('class').match(/item-h(\d)/),                                width = multiplier_w ? columnWidth*multiplier_w[1]-4 : columnWidth,                                height = multiplier_h ? columnWidth*multiplier_h[1]*0.2-4 : columnWidth*0.988-4;                            $item.css({                                width: width,                                height: height                            });                        });                        return columnWidth;                    },                    isotope = function () {                        $container.isotope({                                                     resizable: false,                            masonry: {                                columnWidth: colWidth(),                                gutterWidth: 3                            }                        });                    };                isotope();                $(window).smartresize(isotope);              var $grid = $('.grid').isotope({    itemSelector: '.element-item',    layoutMode: 'fitRows',            });       // filter functions  var filterFns = {    // show if number is greater than 50    numberGreaterThan50: function() {      var number = $(this).find('.number').text();      return parseInt( number, 10 ) > 50;    },    // show if name ends with -ium    ium: function() {      var name = $(this).find('.name').text();      return name.match( /ium$/ );    }  };      // bind filter button click  $('.filters-button-group').on( 'click', 'button', function() {    var filterValue = $( this ).attr('data-filter');    // use filterFn if matches value    filterValue = filterFns[ filterValue ] || filterValue;    $grid.isotope({ filter: filterValue });      });  // change is-checked class on buttons  $('.button-group').each( function( i, buttonGroup ) {    var $buttonGroup = $( buttonGroup );    $buttonGroup.on( 'click', 'button', function() {      $buttonGroup.find('.is-checked').removeClass('is-checked');      $( this ).addClass('is-checked');    });  });});

Botão

 <div id="rend-more"> <div id="#bt-carregar">            <button class="shuffle-button" style="width: 262px; height: 50px; border: 1px solid rgb(84, 128, 128); position: relative; top: 30%; left: 50%; transform: translateX(-50%); cursor: pointer; margin-top: 30px; background-color: white;">                <h2 style="text-align: center;color:#4d8984;font-family: 'Gotham-Thin';float: left;font-size: 25px;padding-left: 30px;padding-top: 5px;">CARREGAR</h2>                <h3 style="padding-left: 5px;float: left;font-size: 25px;color:#4d8984;font-family: 'gotham-bold';padding-top: 5px;">+</h3></button>        </div>        </div>  

GRID ESCONDIDO é um dos blocos do portfolio que está escondido e aparece ao aperna em algum menu.

Quero que ele apareça caso em TODOS após aperta no botão CARREGAR MAIS