Am creating an application in jquery mobile which the final output should be similar to this:

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

The raw html code that produces that image is 

```
        <ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Today, May 1, 2016 <span class="ui-li-count">2</span></li>
      <li><a href="#">
        <h3>Reply</h3>
        <p>20,00 we do have discounts for earlier payers </p>

        <p class="ui-li-aside">10 mins ago</p>
      </a></li>
      <li><a href="#">
        <h4>Me</h4>
        <p>How much is the current fee per semester? Do you accet credit cards</p>
        <p class="ui-li-aside">25 mins ago</p>
      </a></li>
      <li data-role="list-divider">Yesterday, April 30, 2016 <span class="ui-li-count">1</span></li>
      <li><a href="#">
        <h3>Reply</h3>
        <p>Hello, How can i help you?</p>
        <p class="ui-li-aside">10:15 pm</p>
      </a></li>
        <li data-role="list-divider">Friday, April 29, 2016 <span class="ui-li-count">1</span></li>
      <li><a href="#">
        <h3>Me</h3>
        <p>Hello</p>
        <p class="ui-li-aside">10:15 pm</p>
      </a></li>
     </ul>

```

In my project am using json to fetch data from the database and show it to the user in a listview like above.

Code to fetch data from the database:

```
  var id_from = localStorage.loggedin_id;
  var id_to_send = localStorage.user_schoolls_head;
 $.getJSON("http://127.0.0.1/tum_old/custom/php/message.php",  
{id_from:id_from,id_to_send:id_to_send},
function(response){
console.log(response); 
});

```

After the console.log(response) i get the javascript object as:

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

A from the picture with the list a me situation is like the one for from\_id and then to\_id (example 1:4) while a reply is the vice versa.
How can i format the time to display :

```
Today, yeasterday...from hence(on) it will display the dats on the list dividers
Time to show 10mins ago, 20mins ago, but beyond 1 hour it shows the actual time (eg: 10:15pm)
How to also sort these messages according to dates so that 
the earliest is seen first in the today area.. 

```

ie: IT SHOULD APPEAR LIKE THE FIRST IMAGE

MY DATABASE RECORD:
[![enter image description here](https://i.stack.imgur.com/I0ueE.png)](https://i.stack.imgur.com/I0ueE.png)