On click show the values of key that clicked JSON jQuery

I have a JSON file it has this structure :

{
"class1": [
    {
      "age": "17",
      "name": "Mario"
    },
    {
      "age": "16",
      "name": "Messi"
    },
    {
      "age": "17",
      "name": "Xavi"
    },
    {
      "age": "18",
      "name": "Kaka"
    }
  ],
  "class2": [
    {
      "age": "16",
      "name": "Aldon"
    },
    {
      "age": "22",
      "name": "Roney"
    }
  ]
}

html :

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
        <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="script.js"></script>
        <style>
            body{
                margin: 0;
            }
            .my-card {
              height: 350px;
              width: 350px;
            }
            .mdc-top-app-bar{
                position: relative;
            }
        </style>
      
        <title>Links</title>
    </head>
    <body>
        <header class="mdc-top-app-bar">
            <div class="mdc-top-app-bar__row">
              <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
                <button id="btn" class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button" aria-label="Open navigation menu">menu</button>
                <span class="mdc-top-app-bar__title">Links</span>
              </section>
            </div>
          </header>
            <div>
                <section id="drawer">
                    <aside class="mdc-drawer mdc-drawer--modal">
                        <div class="mdc-drawer__content">
                            <h3>class</h3>
                        <nav class="mdc-list">
                          
                        </nav>
                        </div>
                    </aside>
                    <div id="scrollbar" class="mdc-drawer-scrim"></div>
                </section>
            </div>
            <div class="mdc-card">
              
            </div>
    </body>
      <script>
          console.log(mdc)
          const topAppBarElement = document.querySelector('.mdc-top-app-bar');
          const topAppBar = mdc.topAppBar.MDCTopAppBar.attachTo(topAppBarElement);

          const drawer = mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));
          
          topAppBar.setScrollTarget(document.getElementById('scrollbar'));
          topAppBar.listen('MDCTopAppBar:nav', () => {
            drawer.open = !drawer.open;
          });
          
      </script>
</body>
</html>

script:

$(document).ready(function () {
  $(function () {
    $.getJSON("links.json", function (data) {
      $.each(data, function (key) {
        $(".mdc-list").append(
          "<a class='mdc-list-item' href='#'><span class='mdc-list-item__ripple'></span><span class='mdc-list-item__text'>" +
            key +
            "</span></a>"
        );
      });
      $.each(data, function (key, value) {
        $(".mdc-card").append(
          "<a class='mdc-list-item' href='#'><span class='mdc-list-item__ripple'></span><span class='mdc-list-item__text'>" +
            JSON.stringify(data[key]) +
            "</span></a>"
        );
      });
    });
  });
});

what I am trying to do is to render the keys in html page

class1 class2 when I click class1 it should show me all values in class1 class2 key => class2 values any help? This the 5th time I post this question and didn't get any help

here is my sandbox :

https://codesandbox.io/s/affectionate-ride-7gm71?file=/script.js