JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

JavaScript

var valMS = [
  {
    "Subject": "Test",
    "Message": "rooter",
    "Date": "12-03-17"
  },
  {
    "Subject": "Test",
    "Message": "binu",
    "Date": "12-03-17"
  },
  {
    "Subject": "Test",
    "Message": "cal",
    "Date": "12-03-17"
  },
  {
    "Subject": "Test",
    "Message": "nera",
    "Date": "12-03-17"
  }
],html;

 $(document).ready(function () { 
 
   var oq = 
'<div class="panel panel-default ">'+
'<div class="panel-heading accordion-toggle question-toggle collapsed" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question0">'+
'<h4 class="panel-title">'+
'<a href="#" class="ing">Q: What is Lorem Ipsum?</a>'+
              '</h4>'+
            '</div>'+
            '<div id="question0" class="panel-collapse collapse" style="height: 0px;">'+
                '<div class="panel-body">'+
'ANSWER</div></div></div>';
        
 
 
 
  html = '<div class="container"><div class="panel-group" id="faqAccordion">';
    var flag = 0;
    $.each(valMS, function(index, v){
        html += '<div class="panel panel-default">';
        html += '<div class="panel-heading">'+v["Subject"]+'</div>';
         html += '<div class="panel-body">'+v["Message"]+'</div>';
        
        html += '<div class="panel-footer">'+v["Date"]+'</div>';
         html += '</div>';
     });
     html += '</div></div>';
     $('body').append(html);
});