merhaba arkadaşlar admin panelime siteye atılan mesajlar bildirim olarak geliyor.

admin penelindeken bildirim gelmesinde sıkntım yok.
admin paneli kapalı iken 1 mesaj geldiğinde bildirim gösteriliyor.
birden fazla mesaj geldiğinde birdirim müziği geliyor ama mesaj göstermiyor.

javascript siz yaptığımda tüm bildirimler geliyor , ama ben javascript ile almak istiyorum.

Acaba yanlış yaptığım nokta neresi ?.

Kodlarım :

    <link rel="stylesheet" href="css/jquery.toast.css">
    <?php  error_reporting(0); ?>
<?php
// Akin Demircan 15.05.2016 - http://www.akindemircan.com
// Bu satiri kendinize gore duzenleyiniz mysqli("mysql sunucu", "kullanici adi", "parola", "veritabani adi")
$mysqli = new mysqli("localhost", "root", "", "demo34") or die("Veritabani Bulunamadi veya Baglanilamadi");
$mysqli->set_charset("utf8");
$mysqli->query("SET COLLATION_CONNECTION = ‘utf8_unicode_ci’");


$sorgula = $mysqli->query("SELECT * FROM mesajlar WHERE notif='1'");
if ($sorgula->num_rows > 0){
    while ($veri = $sorgula->fetch_assoc()){
        if($veri['notif'] == '1'){  echo "<div class='alerts'><audio id='audioplayer' autoplay=true>
            <source src='sound/glass.mp3' type='audio/mpeg'>
            Tarayiciniz ses elementlerini desteklemiyor. </audio>";?>
        
        <script type="text/javascript">
        
$.toast({
    text: '<?php echo $veri['mesaj']; ?>', // Text that is to be shown in the toast
    heading: '<?php echo $veri['ad']; ?>', // Optional heading to be shown on the toast
    icon: 'success', // Type of toast icon
    showHideTransition: 'slide', // fade, slide or plain
    allowToastClose: true, // Boolean value true or false
    hideAfter: 20000, // false to make it sticky or number representing the miliseconds as time after which toast needs to be hidden
    stack: 5, // false if there should be only one toast at a time or a number representing the maximum number of toasts to be shown at a time
    position: 'top-right', // bottom-left or bottom-right or bottom-center or top-left or top-right or top-center or mid-center or an object representing the left, right, top, bottom values
    
    
    
    textAlign: 'left',  // Text alignment i.e. left, right or center
    loader: true,  // Whether to show loader or not. True by default
    loaderBg: '#9ec600',  // Background color of the toast loader
    beforeShow: function () {}, // will be triggered before the toast is shown
    afterShown: function () {}, // will be triggered after the toat has been shown
    beforeHide: function () {}, // will be triggered before the toast gets hidden
    afterHidden: function () {}  // will be triggered after the toast has been hidden
});
    </script>
        <?php

 echo "</a></div>";
 $mysqli->query("UPDATE mesajlar SET notif='0' WHERE id=".$veri['id']." ");
        }else {

        }
    }
}
?>
   <script src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.toast.js"></script>