JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
<table>
    <thead>
        <tr>
            <th colspan="4">Fill a field:</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Text: <br/><input type="text" id="text" value=""></td>
            <td>Field X: <br/><input type="text" id="field_x" value=""></td>
            <td>Field Y: <br/><input type="text" id="field_y" value=""></td>
            <td>CSS: <br/><input type="text" id="css" value=""></td>
        </tr>
        <tr>
            <td colspan="4"><button id="mybutton">Fill</button></td>
        </tr>
    </tbody>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">

CSS

* {
  font: 14px normal Arial, sans-serif;
  color: #000000;
}

table {
  margin: 50px auto;
}

table, td {
    border: 1px solid #aaa;
    border-collapse: collapse;
}

th {
    padding: 10px;
    font-weight: bold;
}

td {
    background-color: #eeeeee;
    width: 80px;
    height: 80px;
}

table:first-child tr td {
    cursor: pointer;
}

td[colspan="4"]{
    text-align:center;
}

JavaScript

$(document).ready(function(){

  var table1 = $("table").eq(0);
  var row_list;
  var rows;
  var x;
  var y;

  $("#mybutton").click(function(){

      row_list = table1.find("tr");
      rows = row_list.length;
      x = $("#field_x").val();
      y = $("#field_y").val();

      if(x>rows || y>rows){

           var num;   
           if(x>y) num=x;
           else num=y;
           var n = num-rows;    
           var row; table1.find("tr").eq(0).clone();

           while(1){
              row = table1.find("tr").eq(0).clone();
              table1.append(row);
              n--;
              if(n===0) break;
           }

           n = num-rows;    
           var td;

           while(1){
              td = table1.find("td").eq(0).clone();
              table1.find("tr").append(td);
              n--;
              if(n===0) break;
           }

      }

      var text = $("#text").val();
      var css = $("#css").val();
      $("table:eq(0) tr:eq(" + (x-1) + ") td:eq(" + (y-1) + ")").text(text).css("color", css);

  });


  var tds = table1.find("td");
  console.log(tds);
  table1.click(function(ev){
  		console.log(ev);
      $(ev.target).html("");
  });


});