Botão carrega todos em vez de filtrar por grupo.

Estou com um problema, onde se eu aperta no botão para carregar mais blocos através do banco de dados, ele vai carregar todos na ordem do ID, entretanto se eu tiver em algum filtro ele continua carregando todos em vez de só daquele filtro e a cada vez que aperto para carregar + ele faz os blocos anteriores que não são daquele filtro desaparecerem.

Vocês podem ver em: http://somospixel.com/test/ na parte de PORTFÓLIO.

O que preciso?

Que ao aperta em Carregar +, ele carregue apenas os blocos (vindo do banco de dados) do FILTRO selecionado.

Bug?

Mesmo com o FILTRO selecionado, carrega todos os blocos em ordem pelo ID.

FILTROS:

 <div class="button-group filters-button-group listado">
 <button class="button is-checked bttodos" data-filter="todos" onclick="filtrar('todos')">TODOS</button>
 <button class="button btnone btc filter" data-filter="visu" onclick="filtrar('visu')">IDENTIDADE VISUAL</button>
 <button class="button btnone" data-filter="web" onclick="filtrar('web')">DESENVOLVIMENTO WEB</button>
 <button class="button btnone btc" data-filter="grafico" onclick="filtrar('grafico')">MATERIAL GRÁFICO</button>
 <button class="button btnone" data-filter="comu" onclick="filtrar('comu')">COMUNICAÇÃO VISUAL</button>
 <button class="button btnone btc" data-filter="digi" onclick="filtrar('digi')">MARKETING DIGITAL</button>
</div>

Script para montar cada BLOCO:

 <script>
var corpo = "";
function pegaDados()

{

 var idUltimo = $("#buttonIdUltimoItem").val();
 jQuery.ajax
 ({
 url: "pegaPortifolio.php?id="+idUltimo,
 dataType: "json", //Tipo de Retorno
 success:
 function(data) {
 console.log(data);
 var pt1 = "";
 var i = 1;
 var ultimo_id = 0;

 var size = 0, key;
 for (key in data) {
 if (data.hasOwnProperty(key)) size++;
 }
 for(i = 0; i < size; i++){
 pt1 +='<div class="element-item filter filtros third-effect '+data[i].menu+'" data-category="transition"><div style="padding:2.5px;"><div style="border: 1px solid #AAAAAA;"><img src="images/port/mini/'+data[i].imageM+'" alt="project 2"><div class="mask"><a href="#portfolioModal54" onclick="portfolioModal('+data[i].id+')" class="portfolio-link info" data-toggle="modal"></a></div><div class="fundo-port"><h1>'+data[i].tipo+'</h1><h2>'+data[i].nome+'</h2></div></div></div></div>';
 ultimo_id = data[i].id;
 $("#buttonIdUltimoItem").val(ultimo_id);
 }
 monta_html(pt1);
 }
 });
 filtrar($('#buttonIdUltimoItem').attr('class'));
}
function monta_html(dados){
 $(".grid").append(dados); //joga o valor para um elemento html
}
</script>

Estrutura do GRID que aparece o portfólio e coloca a estrutura dos 6 blocos iniciais:

<div class="grid">
 <?php
$servidor = '###';
$banco = '###';
$usuario = '###';
$senha = '###';
$link = @mysql_connect($servidor, $usuario, $senha);
$db = mysql_select_db($banco,$link);
$idUltimoItem = 0;
if(!$link)

{

 echo "erro ao conectar ao banco de dados!";exit();
}

$sql = "SELECT * FROM portfolio ORDER BY id DESC limit 6";
$query = mysql_query($sql);

while($sql = mysql_fetch_array($query)){

$id = $sql["id"];
$idUltimoItem = $id;
$nome = $sql["nome"];
$tipo = $sql["tipo"];
$desc = $sql["desc"];
$menu = $sql["menu"];
$imageM = "images/port/mini/" . $sql["imageM"];
$imageF = $sql["imageF"];
 ?>
 <div class="element-item filter filtros todos third-effect <?php echo "$menu";?>" data-category="transition">
 <div style="padding:2.5px;">
 <div style="border: 1px solid #AAAAAA;">
 <img src="<?php echo "$imageM"?>" alt="project 2">
 <div class="mask">
 <a href="#portfolioModal54" class="portfolio-link info" data-toggle="modal" onclick="portfolioModal(<?php echo $id;?>)" value="Executa ajax"></a>
 </div>
 <div class="fundo-port">
 <h1><?php echo "$tipo"?></h1>
 <h2><?php echo "$nome"?></h2>
 </div>
 </div>
 </div>
 </div>
 <?php
}
?> </div>

BOTÃO:

 <div id="rend-more">
 <button type="button" id="buttonIdUltimoItem" onClick="pegaDados();" value="<?= $idUltimoItem;?>" style="width: 262px; height: 50px; border: 1px solid rgb(84, 128, 128); position: relative; top: 30%; left: 50%; transform: translateX(-50%); cursor: pointer; background-color: white;" class="todos">
 <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>

pegaPortifolio.php (php que puxa do banco de dados cada bloco para aparecer quando aperta em carregar +)

<?php

function fn_conexao(){

 $dbuser = "###";
 $dbpass = "###";

 try {

 $pdo = new PDO('mysql:host=###;dbname=###', $dbuser, $dbpass);
 $pdo -> setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING );
 } catch(Exception $e) {

 echo 'Erro na conexao: ' . $e->getMessage();
 }

 return $pdo;
}

function dados($pdo){

 try {

 if(!isset($_GET['id']) or $_GET['id'] == null){

 $id = 0; //se o GET nao for enviado o for enviado como nullo , a variável ID pega o valor de 0

 }else{

 $id = $_GET['id']; //pega o valor passado via GET
 }

 $arr = array();

 $sql = "ALTER DATABASE portfolio CHARSET = UTF8 COLLATE = utf8_general_ci";
 $sql = "SELECT * FROM portfolio WHERE id < $id ORDER BY id DESC LIMIT 6";
 $stmt = $pdo->prepare($sql);
 $stmt->execute();
 $linha = $stmt->fetchAll(PDO::FETCH_ASSOC);
 if($stmt->rowCount() >= 1){

 return $linha; //retorna o resultado da query

 }else {

 return 0;

 }
 } catch(Exception $e) {

 print 'Erro ao inserir os dados no banco: ' . $e->getMessage();
 $conexao = desconecta($conexao);

 }
}

$conexao = fn_conexao();
$dados = dados($conexao);

$dados = json_encode($dados); //converte o resultado para json

print $dados; //imprime os dados na tela
?>