You don't have to POST data, you can issue a GET request with jQuery too.
I don't know specifically how Phonegap will handle the href attribute in A links; it's worth trying though, as it might do exactly what you need without any additional effort on your part.
If it doesn't, then the approach you're considering is the correct one, but I would not use the "id" attribute to hold your order ID values. Instead, use a custom attribute for it:
<a orderid="5" class="order-link">Order 5</a>
Then you can bind an event handler to ".order-link" that will retrieve the appropriate data using the orderid attribute.
As a more generic approach, you could just use jQuery to bind to the click event on all <a> tags so that when clicked they request their href URL over an xmlhttprequest instead of invoking the native behavior of Phonegap. That way you don't have to write as many distinct event handlers.
I don't understand this logic at all:
| 1. send that to the server to get the relevant details |
2. store it in the local storage, redirect user to another page orders.html and on page initialisation, use the local storage to get the data and do a post request..
Why not just send them to orders.html first, show a loading icon initially, send the HTTP request to the server to get the order information, then hide the loading icon and update the page with the contents from the server.