Jquery, JSON and tabs

Jquery, JSON and tabs

I am new to JQuery and need some help understanding how to structure my code...  I have a working JSON page and have been able to get my code to display the intended results.  Now I want to put those results in a tabbed format.  Basically the title of my article is in the tab and the body of the article underneath.  My code right now shows all of the titles in the tabbed area up top, which is correct, now I need to get the body in the main part.  The final structure should look like this:
  1. <div id="tabs">
       <ul>
           <li><a href="#tabs-1">AAA</a></li>
           <li><a href="#tabs-2">BBB</a></li>
           <li><a href="#tabs-3">CCC</a></li>
       </ul>
       <div id="tabs-1"><h2>AAA</h2><p>This article is about AAA</p></div>
       <div id="tabs-2"><h2>BBB</h2><p>This article is about BBB</p></div>
       <div id="tabs-3"><h2>CCC</h2><p>This article is about CCC</p></div>
    </div>
      
      
So, I can get the first tabbed area to show correctly, but I don't know how to retrieve the second set of data (the divs for the article) - I have tried creating a 2nd callback, I tried duplicating code, but I know I am just missing something due to my inexperience.  Can anyone give me an example of the code I need?  My script is below and the JSON array structure is below that.  Thank you.
  1.     var jsonURL = "//www.myurl.com/api.php/content_data?columns=id_cr,title,teaser&order=title&page=1";
        jQuery(document).ready(function() {
            jQuery.ajax({
                url: jsonURL,
                success: searchCallback
            });
        });
        function searchCallback(data) {
            var content_data = data.content_data.records;
            jQuery.each(content_data, function(index, content_dat) {
                jQuery(".tabs").append('<li><a href="#tabs-' + content_dat[0] + '">' + content_dat[2] + '</a></li>');
            });
            };
    </script>


    <div id="tabs">
        <ul>
            <div class="tabs"></div>
        </ul>
        <div class="body"></div>
    </div>
  1. content_data columns 0 "id_cr" 1 "teaser" 2 "title" records 0 0 69425 1 "<p>Hurricane Harvey has been one of the strongest weather storms to hit the U.S. this year and has caused severe flooding in Texas and parts of Louisiana.</p>" 2 "Hurricane Harvey Aftermath" results 1