JSFiddle - React, Tailwind, and code Playground

by Dereck Jones

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<table id='table_scroll'>
  <section id="section"></section>
</table>

JavaScript

json = [{"data":[{"ClientName":"Client 1","RoomName":"Room 7","RoomFromTime":"09:00","RoomToTime":"15:00"},{"ClientName":"Client 2","RoomName":"Room 4","RoomFromTime":"07:00","RoomToTime":"23:00"},{"ClientName":"Client 3","RoomName":"Room 9","RoomFromTime":"08:00","RoomToTime":"18:00"},{"ClientName":"Client 4","RoomName":"Room 6","RoomFromTime":"08:00","RoomToTime":"19:00"},{"ClientName":"Client 5","RoomName":"Room 5","RoomFromTime":"09:00","RoomToTime":"15:00"},{"ClientName":"Client 6","RoomName":"Room 3","RoomFromTime":"09:00","RoomToTime":"18:00"},{"ClientName":"Client 7","RoomName":"Room 1","RoomFromTime":"09:00","RoomToTime":"16:00"},{"ClientName":"Client 8 ","RoomName":"Room 8","RoomFromTime":"09:00","RoomToTime":"18:00"},{"ClientName":"Client 9","RoomName":"Room 2","RoomFromTime":"08:00","RoomToTime":"17:00"}]}]
  
        json = json[0].data;
				var tr ;
				$('table').html("");
				for (var i = 0; i < json.length; i++) {
					tr = $('<tr/>');
					tr.css("border-bottom","2px solid #FFF");
					tr.append("<td width='33%'><div class='clientname-text'>" + json[i].ClientName + "</div></td>");
					tr.append("<td width='33%'><div class='roomname-text'>" + json[i].RoomName + "</div></td>");
					tr.append("<td width='33%'><div class='time-text'>" + json[i].RoomFromTime + " - " + json[i].RoomToTime + "</div></td>");
					//}
					$('table').append(tr);
				}

get_data();
setInterval(get_data,60000)



$.fn.infiniteScrollUp=function(){
    var self=this,conf=self.children()
    setInterval(function(){
    	conf.slice(10).hide();
		conf.filter(':hidden').eq(0).slideDown()
		conf.eq(0).slideUp(6000, "linear",function(){
        	$(this).appendTo(self);
        conf=self.children();
		console.log(conf);
      });
    },100)
	return this;
}
$(function(){
	$('section').infiniteScrollUp()
})