Como inserir vários registros usando prepare PDO

Estou estudando a criação de formulários dinâmicos, no qual é possível add, um novo campo para preenchimento de novos dados no campo adicionado.

Todas as etapas estão funcionando, porém estou travado na hora de salvar.

Quanto coloco para salvar o script que faz conexão com o banco, manda apenas o primeiro laço para o banco e descarta os que foram adicionados dinamicamente com o botão:

Meu código html

<button type="button" class="btn-success" id="add-campo"> + Registro </button>
 <form id="add-aula" class="container-fluid" method="post">
 <div id="formulario">
 <br /><br />
 <div class="form-group">
 <label>Informe os seus dados de cadastro: </label><br /><br />
 <div class="form-box">
 <input class="nome" type="text" name="nome[]" placeholder="Nome">
 <input class="sobrenome" type="text" name="sobrenome[]" placeholder="Sobrenome">
 </div>
 <div class="form-box">
 <input class="email" type="email" name="email[]" placeholder="exemplo@exemplo.com.br">
 <input class="telefone phone" type="text" name="telefone[]" placeholder="(XX) XXXXX-XXXX">
 <input class="cpf" type="text" name="cpf[]" placeholder="XXXX-XXXX-XXX-XX">
 </div>
 </div>

 </div>
 <button type="button" id="cadAulas" name="cadAulas" class="submit">Cadastrar</button>
 </form>

	Meu código JS

	 

var cont = 0;
$("#add-campo").click(function () {
 cont++
 $("#formulario").append('<div id="campo' + cont + '" class="form-group"><div class="form-box"><input class="nome" type="text" name="nome[]" placeholder="Nome"><input class="sobrenome" type="text" name="sobrenome[]" placeholder="Sobrenome"></div><div class="form-box"><input class="email" type="email" name="email[]" placeholder="exemplo@exemplo.com.br"><input class="telefone phone" type="text" name="telefone[]" placeholder="(XX) XXXXX-XXXX"><input class="cpf" type="text" name="cpf[]" placeholder="XXXX-XXXX-XXX-XX"></div><div class="container-btn"><button type="button" id="' + cont + '" class="btn-remove"> - Registro </button></div></div>');
});
$('form').on('click', '.btn-remove', function () {
 var button_id = $(this).attr('id');
 $('#campo' + button_id + '').remove();
});

$("#cadAulas").click(function () {
 var dados = $("#add-aula").serialize();
 $.post("insert.php", dados , function (retorna) {
 $("#msg").html(retorna);
 $('#add-aula')[0].reset();
 //removeMsg();
 });
});

function removeMsg(){
 setTimeout(function () {
 $("#msg").slideUp();
 $("div.second").slideUp('slow' , function(){});
 }, 200000);
}

	meu código php:

$rows = array($_POST);
$return = false;

foreach ($rows as $key => $row){

 $query = "INSERT INTO cicero(nome, sobrenome, email , telefone, cpf) VALUES (? , ? , ? , ? , ?)";
 $insert = $conn->prepare($query);
 $insert->bindValue( 1 , $row['nome'][$key]);
 $insert->bindValue( 2 , $row['sobrenome'][$key]);
 $insert->bindValue( 3 , $row['email'][$key]);
 $insert->bindValue( 4 , $row['telefone'][$key]);
 $insert->bindValue( 5 , $row['cpf'][$key]);
 if($insert->execute()){
 $return = true;
 }else{
 $return = false;
 }

}

if($return){
 echo '<p class="success">Cadastro realizado com sucesso.</p>';

 echo '<p class="erro">Ops, algo deu errado, não foi possivel realizar o cadastro.</p>';
}
echo $i."<br/>";

	Alguém que tem manje de manipulação de arrays pode me ajudar.

	 

	ps. Importante, estou manipulando o POST com serialize() do jQuery