today.getDate() returns the current day of the month and it looks like $date contains day/month/year (not necessarily in that order). So when you compare the two it will always be false.

I’ve since solved this using pure PHP:

        <!--Fetch and display events from database for SLIDE 2 -->          
        <?php

        $query = "SELECT * FROM `events` ORDER BY `eventDate` DESC LIMIT 3 OFFSET 3;";

        $result = mysqli_query($conn, $query);

        if (mysqli_num_rows($result) > 0) {

            while ($row = mysqli_fetch_assoc($result)) {

                $event = $row["eventName"];
                $date = $row["eventDate"];
                $time = $row["eventTime"];
                $loc = $row["eventPlace"];  
                $desc = $row["eventDesc"]; 

                $today = date("Y-m-d");

        echo " <div id='eventCard' align='center' class='col-md-4'>
               <hr>
               <h3>$event</h3> 
               <br>
               <p><i class='far fa-calendar-times'></i> ". date("d/m/Y", strtotime($date)) ." ";


        echo " ".($today == $date ? "<span class='badge badge-pill badge-danger'>Today!</span>" : "")." ";

        echo"

              <br>
              <i class='fas fa-map-marker-alt'></i> $loc
              <br>
              <i class='far fa-clock'></i> $time
              <br>
              <br>
              <a href='events.php'>More Info </a>
              </p>
              <hr>

              </div>

            ";

             }

        } else {

            echo "

                <div id='eventCard' align='center' class='col-md-4'>
                <h1><i class='fas fa-exclamation-circle'></i> No Results!</h1>
                </div>

          ";

        }

        ?>

        </div>

I have been developing a website events page where I would like a small badge to display beside an event if it happens to take place on the current date.

I have stored my events in a database, where all dates are saved using the DATE data type. On the events page, information is retrieved using PHP/SQL.

I have created a script with jQuery to show the ‘todayAlert’ div when the date of an event matches the current date. Otherwise the div is meant to remain hidden. Unfortunately I can’t get the script to work and the div is always hidden on the first event and always displayed with the following events. Can anyone help work out how to fix the script?

Code:

        <div class='row'>
        <!--Fetch and display events from database for SLIDE 1 -->          
        <?php

        $query = "SELECT * FROM events ORDER BY eventDate DESC LIMIT 3;";

        $result = mysqli_query($conn, $query);

        if (mysqli_num_rows($result) > 0) {

            while ($row = mysqli_fetch_assoc($result)) {

                $event = $row["eventName"];
                $date = $row["eventDate"];
                $time = $row["eventTime"];
                $loc = $row["eventPlace"];  
                $desc = $row["eventDesc"]; 

            echo " <div id='eventCard' align='center' class='col-md-4'>

              <hr>

              <h3>$event</h3>
              <br>
              <p><i class='far fa-calendar-times'></i> ". date("d/m/Y", strtotime($date)) ."     <div id='todayAlert'><span class='badge badge-pill badge-danger'>Today!</span></div>
              <br>
              <i class='fas fa-map-marker-alt'></i> $loc
              <br>
              <i class='far fa-clock'></i> $time
              <br>
              <br>
              <a href='events.php'>More Info </a>
              </p>
              <hr>

              </div>

        <script>
        //show/hide event today alert depending on date
        var today = new Date();


        if(today.getDate() === $date){
            $('#todayAlert').show();
        } else {
            $('#todayAlert').hide();
        }
        </script>


            ";

             }

        } else {

            echo "

                <div id='eventCard' align='center' class='col-md-4'>
                <h1>No Results! <i class='fas fa-exclamation-circle'></i></h1>
                </div>

          ";

        }

        ?>

        </div>

Note- also using Bootstrap v 4.4.1,
Thanks.