kırılma olasılığı yoktur, doğru şekilde sayfanda kontrol yaptığın sürece değerler veritabanından geleceği için ve değerleri session'da tutup ona göre kontrol edeceğin için gönül rahatlığıyla kullanabilirsin.

İlk olarak karakter tanımı için utf8mb4_general_ci olarak ayarla. Böylece türkçe karakter problemi vs. çekmezsin.
İkinci olarak, mysqli ile başlayıp pdo ile devam edip, mysqli ile sonlandırmışsın :D Kafan biraz karışmış orada, aşağıdaki kodu deneyebilirsin.

try {
    $db = new PDO('mysql:host=localhost;dbname=test10;charset=utf8mb4', 'root', '');
} catch(PDOException $e){
    die($e->getMessage());
}

$query = $db->prepare('INSERT INTO yemekler SET img_url = :url, product_name = :name, detail = :detail, price = :price');
$query->execute([
    'url' => $image["image" . $i],
    'name' => $ad["ad" . $i],
    'detail' => $acıklama["acıklama" . $i],
    'price' => $fiyat["fiyat" . $i]
]);
if ($query->rowCount()){
     echo "menü oluşturuldu.<br>";
}

baya düşük çözünürlüklü bir ekran anladığım kadarıyla, responsive olmadığı için şu an o problemi yaşıyorsundur teşekkür ederim bildirdiğin için :)

çalışmaması gayet normal, javascript'de öyle bir fonksiyon yok çünkü :)
eğer php projende logout linkin varsa örneğin;

siteadi.com/cikis

gibi. O zaman javascript içinde şöyle bir istek yaparak çıkış yaptırabilirsin

function cikis() {
    swal({
        title: "Çıkış Yapmak İstediğinize Eminmisiniz",
        icon: "warning",
        buttons: true,
        dangerMode: true,
    }).then((willDelete) => {
        if (willDelete) {
            swal("Başarıyla Çıkış Yaptınız", "", "success").then((value) => {
                $.get('http://siteadi.com/cikis', function () {
                    window.location.reload();
                })
            });
        } else {

        }
    });
}

herhangi bir builder kullanıyorsan (webpack, gulp, grunt vb.) import ederek kullanabilirsin

import 'bootstrap';

https://getbootstrap.com/docs/4.0/getting-started/webpack/

Ancak normal html-css yazıyorsan npm ile kurmak pek işine yaramaz

yapacağın şey url'i aynı tabloda ayrı bir kolonda tutmak.
bunu yapmamakta ısrar etmen tamamen senin hatan olur, işin mantığı her zaman böyle işliyor çünkü :)
yoksa ben sana bir başlık vereyim, onu sen 50 senede uğraşsan seo fonksiyonundan geçirdikten sonra geri eski haline döndüremezsin, boşuna uğraşma yani aşırı saçma bir şey yapıyorsun şu an :)

jquery ajax'la doğrudan dosya işlemleri yapamıyorsun, ama malsup'un form eklentisini kullanabilirsin
http://malsup.com/jquery/form/

ya da javascript'de FormData() ile dosyalar gönderilebilir.