JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>JavaScript Virtual Keypad Demo</title>
  <link rel="stylesheet" type="text/css" href="keypad.css">
</head>
<body>

<input type="text" id="userinput"><br>
<div class="keypad">
</div>

<script src="app.js"></script>
</body>
</html>

CSS

.keypad {
  position: absolute;
  border: 1px solid #ccc;
  padding: 10px;
  cursor: move;
  z-index: 21;
  text-align: center;
  background-color: #F0F8FF;
}

.keypad > div {
  display: block;
}

JavaScript

'use strict';

function createKeypad() {
  var word = document.querySelector("#userinput");
  var keypad = document.querySelector(".keypad");

  var letters = [ ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
                  ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
                  ['z', 'x', 'c', 'v', 'b', 'n', 'm'],
                  ['ā', 'ḍ', 'ī', 'ḷ', 'ṁ', 'ṃ', 'ñ', 'ṇ', 'ṭ', 'ū', 'ŋ', 'ṅ'] ];

  for (var row = 0; row < letters.length; row++) {
    var divElm = document.createElement("div");
    for (var i = 0; i < letters[row].length; i++) {
      var inputElm = document.createElement("input");
      inputElm.type = "button";
      inputElm.value = letters[row][i];
      divElm.appendChild(inputElm);
      inputElm.addEventListener("click", function(e) {
        word.value += e.target.value;
      }, false);
    }
    keypad.appendChild(divElm);
  }
}

createKeypad();