Json to html table using java script

Am new to javascript. I need to parse the below JSON into a html using java script, such a way that The Table 1 should be visible at first and if I click on the class 12A, then it should show Table 2 in the same place where we display Table 1 with 12A details. From Table 2 , if I click on staff name, then it should display Table 3 in the same place where we display Table 3. Can someone guide me with the logic

Table 1

Table 2

Table 3

{
  "school" : [{
    "class" : "12A",
    "total" : "75",
    "staff" : [{
        "staffName" : "Stella", 
        "age" : "31",
        "staffDetails" : [{
          "totalClassTaken" : "3",
          "degree" : "Masters"
        }]
    }]
  },
  {
    "Class" : "12B",
    "total" : "75",
    "staff" : [{
      "staffName" : "Morris", 
      "total" : "20",
      "staffDetails" : [{
        "totalClassTaken" : "3",
        "degree" : "Masters"
      }]   
  }]
  }]
}