JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<table id="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Vote</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

<div class="center">
  My Expectation
</div>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Vote</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>3000</td>
    </tr>
    <tr>
      <td>Allen</td>
      <td>3100</td>
    </tr>
    <tr>
      <td>Karin</td>
      <td>3200</td>
    </tr>
  </tbody>
</table>

CSS

table td,table th { 
  padding:8px;
  border: 1px solid
}
.center {
  margin: 16px 0
}

JavaScript

var name_id = [1000, 1001, 1002];
var total = [3000, 3100, 3200];
var name_data = {
  "1": {
    "1000": {
      "nama": "John Doe",
      "gender": "Male",
    },
    "2000": {
      "nama": "Nathan Doe",
      "gender": "Male",
    },
  },
  "2": {
    "1001": {
      "nama": "Allen",
      "gender": "Male",
    },
    "2001": {
      "nama": "Clara",
      "gender": "Male",
    },
  },
  "3": {
    "1002": {
      "nama": "Karin",
      "gender": "Female",
    },
    "2002": {
      "nama": "Queen",
      "gender": "Female",
    },
  },
}
let tbody = $("<tbody></tbody>");

Object.keys(name_data).forEach(key => {
  let nameId = name_id[key-1];
  tbody.append("<tr><td>"+name_data[key][nameId].nama+"</td><td>"+ total[key-1]+"</td></tr>");  
})
$('#table').append(tbody);