Show's current time position on a vertical schedule. Open in jsbin etc.

schedule.html

<div class="clock">
  <div class="current-time">
  
  </div>
  8:00am
  <div class="block" data-time="8">
    <div class="class">
    
    </div>
    <div class="class">
    
    </div>
  </div>
  9:00am
  <div class="block" data-time="9">
    <div class="class">
    
    </div>
    <div class="class">
    
    </div>
  </div>
  10:00am
  <div class="block" data-time="10">
    <div class="class">
    
    </div>
    <div class="class">
    
    </div>
  </div>
  11:00am
  <div class="block" data-time="11">
    <div class="class">
    
    </div>
    <div class="class">
    
    </div>
  </div>
  12:00pm
  <div class="block" data-time="12">
    <div class="class">
    
    </div>
    <div class="class">
    
    </div>
  </div>
  1:00pm
  <div class="block" data-time="13">
    <div class="class">
    
    </div>
  </div>
  2:00pm
  <div class="block" data-time="14">
    
    <div class="class">
    
    </div>
  </div>
  3:00pm
  <div class="block" data-time="15">
    
    <div class="class">
    
    </div>
    <div class="class">
    
    </div>
  </div>
  4:00pm
  <div class="block" data-time="16">
    
    <div class="class">
    
    </div>
  </div>
</div>

scripts.js

var script = document.createElement('script');
script.src = 'http://code.jquery.com/jquery-2.3.0.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);

function startTime() {   
		var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    if(h > 12) {
    	h12 = h - 12;
    }
    else { h12 = h };
    //$('.time').html(h12 + ":" + m + ":" + s);
    
   	if($("div[data-time='" + h + "']").length) {
      positionBar(h, m);
    } else {
    	var lastHour = findLast(h);
      positionBar(lastHour, 59);
    }
    
    var t = setTimeout(startTime, 500);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}
function positionBar(h, m) {
	var barPosition = $('.clock').find("div[data-time='" + h + "']").offset().top;

  barPosition = barPosition + ($('.clock').find("[data-time='" + h + "']").innerHeight() * (m / 60));

  $('.current-time').css('top', barPosition - 18);
}
function findLast(h) {
	h = h-1;
  if ($("div[data-time='" + h + "']").length){
  	return h;
  }
  else {
  	return findLast(h);
  }
}

startTime();

styles.css

.clock {
  width: 90%;
  background-color: #fff;
  padding:15px;
  padding-left: 50px;
  position: relative;
}
.block {
  margin-bottom: 15px;
}
.block .class {
  height: 50px;
  background-color: #ddd;
  margin-bottom: 15px;
}
.current-time {
  width: 30px;
  height: 20px;
  left:0;
  background-color: #777;
  position: absolute;
  transition: 0.5s all linear;
}
.current-time:after {
  content: "";
  position: absolute;
  right: -10px;
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #777;
}