title: How to start and stop glow each button at specific time according to AM and PM using java script or jquery
body: <p>I am working on appointment time management and want to glow the button by matching the  system current time to the button value.</p>
  
  <p>For Example:
  there is a button with value 3:00 PM. I want to glow this button when the system time reaches to 2:59:59 PM (2 hour 59 minutes and 59 seconds).Make sure the button with value 2:59:59 <strong>AM</strong> not glow when the system date is 2:59:59 <strong>PM</strong></p>
  
  <p>when time reaches to the 3:14:59 PM stop the glowing button and start Glow up the next button .</p>
  
  <p>Same for the other buttons. </p>
  
  <p>Note: The current code is showing the system current time in the form of digital clock and glowing all the button by using css.</p>
  
  <p>Here is my code:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var $document = $(document);
  (function () { 
    var clock = function () {
        clearTimeout(timer);
      
        date = new Date();    
        hours = date.getHours();
        minutes = date.getMinutes();
        seconds = date.getSeconds();
        dd = (hours &gt;= 12) ? 'pm' : 'am';
        
      hours = (hours &gt; 12) ? (hours - 12) : hours
        
        var timer = setTimeout(clock, 1000);
      
      $('.hours').html('&lt;p&gt;' + Math.floor(hours) + ':&lt;/p&gt;');
      $('.minutes').html('&lt;p&gt;' + Math.floor(minutes) + ':&lt;/p&gt;');
      $('.seconds').html('&lt;p&gt;' + Math.floor(seconds) + '&lt;/p&gt;');
        $('.twelvehr').html('&lt;p&gt;' + dd + '&lt;/p&gt;');
    };
    clock();
  })();
  
  (function () {
    $document.bind('contextmenu', function (e) {
      e.preventDefault();
    });  
  })();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url(http://fonts.googleapis.com/css?family=Orbitron);
  body {
    background-color: #bcc8d1;font-family: 'Orbitron', sans-serif;
    font-size:25px;
    line-height:0px;
    color:white;
    font-weight: 100;
  }
  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  
  .desc {
    width:25%;
    margin:auto;
    font-size:11px;
  }
  .clock {
    top:30%;
    
    background-color: #3c434c;
    width:300px;
    height:100px;
    margin:auto;
    padding:20px;
  }
  .clock div{
    display:inline-block;
    background-color: #202731;
    width:25%;
    height: 100%;
    text-align: center;
  }
  
   
  
  .button {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  }
  
  .button {
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  
  }
  
  .button:hover {
  cursor:pointer;
  -webkit-animation-name: pulse;
  -webkit-animation-duration: .8s;
  -webkit-animation-iteration-count: infinite;
  }
  
  @-webkit-keyframes pulse {
  from { color:#ccc;background-color: orange; -webkit-box-shadow: 0 0 9px #ccc; }
    50% { color:#fff;background-color: red; -webkit-box-shadow: 0 0 18px #000; }
    to { color:#ccc;background-color: black; -webkit-box-shadow: 0 0 9px #ccc; }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;input type="button" class="button" href="#" value="2:45 PM"&gt;
        &lt;input type="button" class="button" href="#" value="3:00 PM"&gt;
        &lt;input type="button" class="button" href="#" value="3:00 AM"&gt;
        &lt;input type="button" class="button" href="#" value="3:30 PM"&gt;
        &lt;input type="button" class="button" href="#" value="3:45 PM"&gt;
        &lt;input type="button" class="button" href="#" value="4:00 PM"&gt;
        &lt;input type="button" class="button" href="#" value="4:15 PM"&gt;
        &lt;input type="button" class="button" href="#" value="4:30 PM"&gt;
      &lt;div class="clock" style="margin-left:200px; position:absolute"&gt;
        &lt;div class="hours"&gt;&lt;/div&gt;&lt;!--
     --&gt;&lt;div class="minutes"&gt;&lt;/div&gt;&lt;!--
      --&gt;&lt;div class="seconds"&gt;&lt;/div&gt;&lt;!--
      --&gt;&lt;div class="twelvehr"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
     </code></pre>
  </div>
  </div>
  </p>