Проблема с настройкой html элемента через jQuery и PHP

Переменные, которые вы объявляете в теге <script>, являются глобальными переменными, они не привязаны к текущей записи в цикле. Это означает, что когда вы добавляете несколько таких тегов сценария, вы в конечном итоге изменяете переменную, а не создаете новую. Что вам нужно сделать, так это создать область для переменных, которая не является глобальной.

if ($stmt->execute()) {
    $stmt->bind_result($id, $seminar_date, $am_pm, $room, $building, $speaker_lname, $speaker_fname, $title);

    while($stmt->fetch()) {
        ?>
            <script>
            (function(){
                var date_object = new Date("<?php echo $seminar_date; ?>");

                var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
                var month = monthNames[date_object.getMonth()];
                var day = date_object.getDay();
                var year = date_object.getFullYear();
                var hour = date_object.getHours();
                var mins = date_object.getMinutes();
                var time_string = null;
                var ampm = null;

                if (hour > 12) {
                    hour -= 12;
                    ampm = "PM";
                }
                else {
                    ampm = "AM";
                }

                if (mins === 0) {
                    mins = "00";
                }

                time_string = `${hour}:${mins} ${ampm}`;

                // using ES6 string template literal for date string
                var date_string = `${month} ${day}, ${year} at ${time_string}`;

                console.info(`date and time: ${date_string}`);

                $(".seminar_date_time").html(date_string);
            }());
            </script>
            <tr class = "clickable_row" data-href = "seminar_attendance.php?id=<?php echo $id; ?>">
                <td class = "seminar_date_time"></td>
                <td><?php echo $room; ?></td>
                <td><?php echo $building; ?></td>
                <td><?php echo "$speaker_lname, $speaker_fname"; ?></td>
                <td><?php echo $title; ?></td>
            </tr>
        <?php
    }
}

Это должно сработать для вас.

Но я должен отметить, что это не лучший способ смешивать php и JavaScript. Вы должны попытаться сделать все это только на php, а не смешивать это на веб-интерфейсе и бэкэнде.

Не состояние гонки, нет. Это потому, что вы добавляете один и тот же javascript снова и снова, каждый раз переопределяя date_string, а затем заменяя весь соответствующий контент $(".seminar_date_time") самым новым date_string

Лучшим решением было бы создать массив отдельных дат и добавить только javascript однажды после цикла как функция, затем добавить массив как новый объект javascript и запустить функцию для каждого элемента массива.

Или, если вы уже занимаетесь обработкой и построением html в PHP... просто сделать все это в PHP, таким образом, дата будет правильной с самого начала.

Вы не должны подвергать такую ​​обработку внешнему интерфейсу через javascript. Но с js вот мой вариант:

<?php
if ($stmt->execute()) {
    $stmt->bind_result($id, $seminar_date, $am_pm, $room, $building, $speaker_lname, $speaker_fname, $title);
?>
    <script>
            (function() {
                var fn_date_string = function(dt) {
                    var date_object = new Date(dt);

                    var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
                    var month = monthNames[date_object.getMonth()];
                    var day = date_object.getDay();
                    var year = date_object.getFullYear();
                    var hour = date_object.getHours();
                    var mins = date_object.getMinutes();
                    var time_string = null;
                    var ampm = null;

                    if (hour > 12) {
                        hour -= 12;
                        ampm = "PM";
                    }
                    else {
                        ampm = "AM";
                    }

                    if (mins === 0) {
                        mins = "00";
                    }

                    time_string = `${hour}:${mins} ${ampm}`;

                    // using ES6 string template literal for date string
                    var date_string = `${month} ${day}, ${year} at ${time_string}`;

                    return date_string;
                };
                $(function () {
                    // DOM is fully loaded
                    $(.seminar_date_time).each(function () {
                        $(this).html(fn_date_string($(this).data('dt'));
                    }
                });
            })();
    </script>
?>
    while($stmt->fetch()) {
        ?>
            <tr class = "clickable_row" data-href = "seminar_attendance.php?id=<?php echo $id; ?>">
                <td class = "seminar_date_time" data-dt = "<?php echo $seminar_date; ?>"></td>
                <td><?php echo $room; ?></td>
                <td><?php echo $building; ?></td>
                <td><?php echo "$speaker_lname, $speaker_fname"; ?></td>
                <td><?php echo $title; ?></td>
            </tr>
        <?php
    }
}