I'm trying to generate `Bootstrap` panel based on `JSON` output.
here is my sample `JSON` output

```
$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"
  }
]';

```

here is I tried `JQUERY` function

```
<script>
    $(document).ready(function () {
    $('body').append('<div class="container" ></div><br>');

    var html = '<div class="container" ><div class="panel panel-default">';
    html += '';
    var flag = 0;

    var data2   =   <?php echo $valMS; ?>;
    $.each(data2[0], function(index, value){
        html += '<div class="panel-heading">'+index+'</div>';
    });
    html += '';
     $.each(data2, function(index, value){
         html += '<div class="panel-body">';
        $.each(value, function(index2, value2){
            html += ''+value2+'';
        });
        html += '</div>';
     });
     html += '</div>';
     $('body').append(html);
     console.log(html);
});
</script>

```

According to my code which generates panel like this

[![enter image description here](https://i.stack.imgur.com/IeCHq.png)](https://i.stack.imgur.com/IeCHq.png)

But I really need this 

[![enter image description here](https://i.stack.imgur.com/dA5e0.png)](https://i.stack.imgur.com/dA5e0.png)

What I need to change in my code. How to generate panels for this `JSON` output. Thank you