What I am trying to do, display a timeline on y-axis, every 15 mins starting from 7 Am to 7 PM, i.e 7:00 AM , 7:15 AM .... 7:45 PM.

This is my create timeline function

const CreateTimeLine = starttime =>{
  
  var hours, minutes, ampm;
  var time = [];

  // 60 * 12 = 720
  for(var i = 0; i <= 720; i += 15){
  
      hours = Math.floor(i / 60);
      minutes = i % 60;
      if (minutes < 10){
          minutes = '0' + minutes; // adding leading zero
      }
      // ampm = hours % 24 < 12 ? 'AM' : 'PM';
      hours = hours % 12;
      
      if (hours === 0){
          // state what time to start
          hours = starttime;
      }
      // time.push(hours + ':' + minutes + ' ' + ampm);
      
      time.push(hours + ':' + minutes);
  }
  
  /* console.log("timeline ", time) */;

  return time;
}

Expected result: timeline show in sequence as what my function does.

Actual result: time line is not displaying as expected.

Where am I doing it wrong??

this is my jsfiddle with the whole code