No records displaying with JQuery & HTML output question

No records displaying with JQuery & HTML output question

I am having issues with my code.

Index.html

< !DOCTYPE html >
 < html lang = "en" >
 < head >
 < script type = 'text/javascript' src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' ></ script >
</head>
<body>
<!-- Side Menu --!>
 < ul id = "sidemenu" class = "acc-menu" ></ ul >
 <!-- Show Categories -->
< script type = 'text/javascript' >                                     $ ( document ) .ready ( function (){
/* call the php that has the php array which is json_encoded */
$.getJSON ( 'assets/php/side-menu.php' , function ( data ) {
 /* data will hold the php array as a javascript object */
 $.each ( data.categories , function ( key , val ) {
 $ ( 'ul#sidemenu' ) .append ( '<li><a href="listings.html?cat=' + val.category_id + '"><i class="' + val.category_icon + '"></i><span>' + val.category_desc + '</span></a></li>' );
 });
});
});
<!-- End Categories -->

(so this works. Now I want to do the same loop with this code in the same index.html)

<!-- Start Panel -->
< div class = "col-md-4" >
 < div class = "panel panel-brown" data-widget = '{"draggable": "false"}' >
< div class = "panel-heading" >
< h2 > Travel </ h2 >
< div class = "panel-ctrls" data-actions-container = "" data-action-collapse = '{"target": ".panel-body, .panel-footer"}' ></ div >
</ div >
< div class = "panel-body" style = " height : 120 px ; text-align : center " >
< i class = "fa fa-camera fa-5x" style = " color : orange " ></ i >
</ div >
< div class = "panel-footer" >
< span class = "text-gray" >< em > Sponsored by < a href = "profile.html" >   Business Name </ a ></ em ></ span >
</ div >
</ div >
</ div >
<!-- End Panel -->

I could not figure out how to attach it the a div.
I could not figure out what the best way was to handle all the html code and escape the elements in the code.

Thanks for any help.