title: How to create matrix table
body: <p>I want to create dynamic matrix type data display  using java script, html, and jquery which is shown <a href="http://jsfiddle.net/FunvZ/47/" rel="noreferrer">here</a>.</p>
  
  <pre><code>var reservations = [
      {"date":"22-12-2013","MCHC":"22","Pulse rate":"75","weight":"50" },
      {"date":"11-12-2013","CBC":"5"},
      {"date":"11-12-2013","weight":"55"}
  ];
  var tbody = $('#reservations tbody'),
      props = ["date", "MCHC", "CBC", "Pulse rate", "weight"];
  
  $.each(reservations, function(i, reservation) {
    var tr = $('&lt;tr&gt;');
    $.each(props, function(i, prop) {
         $('&lt;td&gt;').html(reservation[prop]).appendTo(tr);  
    });
    tbody.append(tr);
  });
  </code></pre>
  
  <p>The problem is that the code is working properly but it does not display unique data based on date.
  For example, as shown in the above link "date:11-12-2013" is repeated twice which I don't want. I want to display unique data.  </p>
  
  <p>My desired output is:
  <img src="https://i.stack.imgur.com/qHePP.png" alt="enter image description here"></p>