Create table dynamically based on json array data

i would like to generate the table dynamically from an array of object using javascript, below is the table that i want to generate at the end

---------------------------------------
|Handsome Level | Data from json array|
---------------------------------------
|Height         | Data From json array|
---------------------------------------
|Weight         | Data from json array|
---------------------------------------
|Stamina        | Data from json array|
---------------------------------------
|Academic       | Data from json array|
---------------------------------------
|Popularity     | Data from json array|
---------------------------------------

Here is the sample of array data

[
  {
    id: 1,
    remarks: [
      "Very Handsome",
      "182 cm",
      "62 kg",
      "70",
      "No fails",
      "Very Popular",
    ],
  },
  {
    id: 2,
    remarks: [
      "Just Handsome",
      "166 cm",
      "51 kg",
      "70",
      "2 fails",
      "Quite Popular",
    ],
  },
  {
    id: 3,
    remarks: [
        "Not Handsome",
        "162 cm",
        "77 kg",
        "20",
        "7 fails",
        "N/A",
    ],
  },
];

the data will be displayed based on id, so if lets say id 2 is being pressed then all those data within the array will be display as shown below

---------------------------------------
|Handsome Level | Just Handsome       |
---------------------------------------
|Height         | 166 cm              |
---------------------------------------
|Weight         | 51 kg               |
---------------------------------------
|Stamina        | 70                  |
---------------------------------------
|Academic       | 2 fails             |
---------------------------------------
|Popularity     | Quite Popular       |
---------------------------------------

I not sure how to create table like this dynamically using javascript, please help me