dynamic countdown timer not working the clock is not properly showing time

I have a javascript flipclock first of all when ever i refresh the page it start from the beginning as I want it to be resumed from where it was stopped before page refresh and I want my timer to be stoped every day at 4:00 AM or 4:00 PM but when I tried to enter some php the clock is not properly showing i don't know is there any php fiddle available so I can show what is the bud like jquery fiddle

Here is what i tried to do so

    $query      = mysqli_query($connection, "SELECT * FROM timer WHERE id = '1'");
    $timer      = mysqli_fetch_array($query);
    $time_st    = $timer[2];
    $time_end   = $timer[3];
    $date       = $timer[1];
    $time_rem   = $date . " " . $time_st;
    $rem        = strtotime("$time_rem") - time();
    $today      = getdate();
    $time_end   = $today['hours'] . ':' . $today['minutes'] . ':' . $today['seconds'];
?>

My Clock

<div class="clock_area">
            <div class="clock"></div>
            <p>COUNTDOWN TILL 4:20</p>
        </div>

<script type="text/javascript">

    $(document).ready(function() {
        var clock;

        clock = $('.clock').FlipClock({
            clockFace: 'HourlyCounter',
            autoStart: false,
            callbacks: {
                stop: function() {
                    $('.message').html('Offer Closed')
                }
            }
        });
         <?php 
          if($time_end == $time_st || $time_end == '04:20:00') { 
              ?>        
                   clock.setTime(0);
        <?php } else { ?>
        clock.setTime(<?php echo $rem; ?>);
          <?php } ?>
        clock.setCountdown(true);
        clock.start();
    });
</script>

Please help me out with this like my scenario is really simple but little bit logical though