JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="comments_thread"></div>
JavaScript
var loadComments = (function closure() {
function loadComments() {
this.data = [{
"idComment": 1,
"user": "john doe",
"since": "8 hours ago",
"content": "Lorem ipsum dolor sit amet"
}, {
"idComment": 2,
"user": "john doe",
"since": "5 hours ago",
"content": "Lorem ipsum dolor sit amet "
}];
this.ajaxloadComments = function () {
$.getJSON('/path/to/file', function (json) {
this.data = json;
});
}
}
return loadComments;
})();
var Comments = (function closure() {
//static variable
var stat = false;
function Comments(loadComments) {
this.loadComments = loadComments;
this.init = function init() {
this.loadCommentDom(this.loadComments.data)
this.setModal();
this.deleteComment();
}
this.loadCommentDom = function (comments) {
$.each(comments, function (index, el) {
var comment = "<div class='commentsForm'><form action=''><div class='box'><div class='content'><div class='textarea-wrapper'><div class='alert-comments' style='display:none'><span id='error'></span></div><div class='textarea'><p id='content'>" + el["content"] + "</p></div><div class='post-actions'><div class='temp-post' style='text-align:left'>Posted<span id='time'>" + el["since"] + "</span></div><div class='temp-post-right' style='text-align:right'><button data-ref='" + el["idComment"] + "' name='deleteComment' class='delete'>Delete</button></div></div></div></div></div></form></div>";
var container = $("<div/>").attr({id: 'cmt-' + el["idComment"]});
container.append(comment)
$("#comments_thread").append(container);
});
}
this.deleteComment = function() {
...