veritabanını yanlış kullanıyorsun. böyle tabi kendine sorun teşkil eder sıralama yaparken. tablo yapını tekrar düzenle.

id, soru, cevap şeklinde yapı oluştur ve id'ye göre sırala. kodları değiştirmene gerek kalmaz.

count dizide bulunan öğeyi hesaplar

if(count($veri) < 5){

//veri beşten küçükse çalışacak blok

}

çok açık uçlu bir soru sormuşsun ve yeterince detay vermemişsin. bir örnek hazırladım. umarım işini görür.

<a id="php">PHP </a>
<script>
$( "#term" ).autocomplete({
    source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ],
    change: function(event, ui){
        $('#'+ui.item.value).attr("href", ui.item.value);
    }
});
</script>

$sonuc = implode(', ', $adsoyad);
echo $sonuc;

bunun için implode kullanman gerek, dizileri birleştirir.

anlamadım. birleştirmek istediğin dizinin örneği ile birlikte yazarsan, daha iyi olur.

$arr = [
    0 => ["ad" => "ali", "soyad" => "k"],
    1 => ["ad" => "ceren", "soyad" => "b"],
    2 => ["ad" => "eren", "soyad" => "e"],
    3 => ["ad" => "erdem", "soyad" => "a"],
    4 => ["ad" => "burak", "soyad" => "s"],
    5 => ["ad" => "uğur", "soyad" => "u"],
];
$adSoyad = array();
foreach($arr as $key => $value){
    $adSoyad[] = $value["ad"]." ".$value["soyad"];
}
print_r($adSoyad);

css'i hiç sevmedim, javascript varken artık css de dinamikleştirmek adına arayüzde hiç style bile yazmıyorum. bu da pratik yapmadığım için bildiklerimi unutmama sebep oluyor. ancak sadece dikkatsizlik yaptığım için, mesaj kasmaya çalışan bir ergenmişim gibi tavır takınman hoş olmadı. css konularına bir daha bakmayacağım, senin sorduğun sorularada.

    a{
        align-self: flex-end;
        padding: 3px 8px;
        font-family: 'Mulish', sans-serif;
        font-size: 15px;
        box-shadow: $shadow-sm;
        transition: .5s all;
    }
    a i {
        transition: all .4s;
    }
    a:hover > i{
        display: inline-block;
        color: $white;
        transform: rotateX(180deg) rotateY(180deg);
    }

a {
	align-self: flex-end;
	padding: 3px 8px;
	font-family: 'Mulish', sans-serif;
	font-size: 15px;
	box-shadow: $shadow-sm;
	transition: .5s all;
	i {
		transition: all .4s;
	}
	&:hover {
		>i {
			display: inline-block;
			color: $white;
			transform: rotateX(180deg) rotateY(180deg);
		}
	}
}

@rotalie hover için animation kullanabilirsin, öyle bi yazdın ki kendimden şüphe ettim hover da animation kullanılmıyor mu diye. alternatif bir kullanım fikiri idi benimki, neyse dediğin gibi olsun;

    a{
        align-self: flex-end;
        padding: 3px 8px;
        font-family: 'Mulish', sans-serif;
        font-size: 15px;
        box-shadow: $shadow-sm;
        transition: .5s all;
    }
    a i {
        transition: all .4s;
    }
    a i:hover{
        display: inline-block;
        color: $white;
        transform: rotateX(180deg) rotateY(180deg);
    }

<a>Profili görüntüle <i>test</i></a>

sanırım scss hali de şöyle

a {
	align-self: flex-end;
	padding: 3px 8px;
	font-family: 'Mulish', sans-serif;
	font-size: 15px;
	box-shadow: $shadow-sm;
	transition: .5s all;
	i {
		transition: all .4s;
		&:hover {
			display: inline-block;
			color: $white;
			transform: rotateX(180deg) rotateY(180deg);
		}
	}
}

not: bence Y eksenini eksi yapmayı dene, daha güzel dönüyor.

normalde test edip yanıt veriyorum ama, css dalınca çıkamıyorum : ) animation kullansan olmuyor mu? bana başlangıç sürelerinin çakışması gibi bir problem yaşıyormuşsun gibi geldi. animation da ne zaman animasyonun başlayacağını seçebiliyorsun.

a için delay'ı 0 ayarlayıp duration'u 0.5
b için delay'ı 0.5 ayarlayıp duration'u 0.4 yapabilirsin.

böylece a tetiklendiğide hemen çalışır ve çalışma süresi sona erdiği anda b çalışır.

animaton'un parametrelerini karştırmadan yazmak için bu siteden https://webcode.tools/generators/css/keyframe-animation faydalanıyorum. lazım olursa buradan da faydalanmanı tavsiye ederim.