JSFiddle - React, Tailwind, and code Playground

by khushboo097

HTML

<button onclick="myFunc()">
click me
</button>
<div id="reviews">

</div>

CSS

.name {
  width: 40%;
  float: left;
}

.comment {
  width: 60%;
  float: left;
}
#reviews > ul > li{
    list-style-type: none;
}

JavaScript

var ris = [{
    username: 'Raj',
    comment: 'hey there!'
  },
  {
    username: 'Tina',
    comment: 'how are you!'
  },
  {
    username: 'Anjali',
    comment: 'look here now.'
  }
];
var myFunc = function() {
console.log('here');
  $("#reviews").html("<ul></ul>");
  for (var i = 0; i < ris.length; i++) {
    var name = "<span class='rev_name name'>" + ris[i].username + "</span>";
    var comment = "<span class='rev_comment comment'>" + ris[i].comment + "</span>";
    $("#reviews > ul").html($("#reviews > ul").html() + "<li>" + name + " " + comment + "</li>");
  }

}