JSFiddle - React, Tailwind, and code Playground

by Justin

HTML

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div class="container">

  <div class="left extend">
    <div class="representation"></div>
    <div class="comments"></div>
  </div>
  <div class="right equal">
    <div class="representation"></div>
    <div class="comments"></div>
  </div>


</div>

CSS

.container > div {
  display: inline-block;
  width: 40%;
  vertical-align: top;
}

JavaScript

var FanVideo = {
		  comments: {
		    4: 'First Comment',
		    6: 'Second Comment',
		    8: 'Third Comment',
		    10: 'Fourth Comment'
		  },
		  counter: 0,
		  _comments: {},
		  init: function() {
		    var self = this;
		    this._comments = $.extend({}, this.comments);
		    setInterval(function() {
		      console.log('Attempting to check', self._comments, self.counter);
		      self._checkComment(self.counter);
		      if (Object.keys(self._comments).length === 0 && self._comments.constructor === Object) {
		        self.resetComments();
		      } else {
		        self.counter = self.counter + 2;
		      }
					$('.extend .representation').text(JSON.stringify(self._comments));

		    }, 2000)
		  },
		  _checkComment: function(time) {

		    for (var key in this._comments) {
		      if (key <= time) {
		        $('.extend .comments').append('<p>' + this._comments[key] + '</p>');
		        delete this._comments[key];
		      }

		    }
		  },
		  resetComments: function() {
		    this._comments = $.extend({}, this.comments);
		    this.counter = 0;
		  }
		};

		FanVideo.init();
		var FanVideo2 = {
		  comments: {
		    4: 'First Comment',
		    6: 'Second Comment',
		    8: 'Third Comment',
		    10: 'Fourth Comment'
		  },
		  counter: 0,
		  _comments: {},
		  init: function() {
		    var self = this;
		    this._comments = this.comments;
		    setInterval(function() {
		      console.log('Attempting to check', self._comments, self.counter);
		      self._checkComment(self.counter);
		      if (Object.keys(self._comments).length === 0 && self._comments.constructor === Object) {
		        self.resetComments();
		      } else {
		        self.counter = self.counter + 2;
		      }

		    }, 2000)
		  },
		  _checkComment: function(time) {

		    for (var key in this._comments) {
		      if (key <= time) {
		        $('.equal .comments').append('<p>' + this._comments[key] + '</p>');
		        delete this._comments[key];
		      }

		    }

		  },
		 ...