Populate content of a page dynamically

HTML

<!DOCTYPE html>
<html>
    
    <head>
        <title>Test</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"
        />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    </head>
    
    <body>
        <!-- Glossary -->
        <div data-role="page" id="glossary">
            <div data-role="header">
                 <h3>Glossary</h3>

            </div>
            <div data-role="content">
                <ul data-role='listview' data-inset='true' id='resultsList'>
                    <!-- keep empty for dynamically added items -->
                </ul>
            </div>
        </div>
        <!-- display -->
        <div data-role="page" id="display">
            <div data-role="header">
                 <h3>Name Goes Here</h3>
 <a data-role="button" data-rel="back" data-icon="back">Back</a>

            </div>
            <div data-role="content">
                <div id="definition">Definition goes here</div>
            </div>
        </div>
        <script>
            var json = {
                "results": [{
                    "term": "Term One",
                    "definition": "This is the definition for Term One"
                }, {
                    "term": "Term Two",
                    "definition": "This is the definition of Term Two"
                }, {
                    "term": "Term Three",
                    "definition": "This is the definition for Term Three"
                }],
                    "ok": "true"
            };
            var currentItem = 0;

            $('#glossary').on('pageinit', function() {

                $.each(json.results, function(i, term) {
                    $('#resultsList').append('<li><a href="#display">' + term.term + '</a></li>')
    ...